Introduction to HTML5 element attributes and html5 element attributes

Introduction to HTML5 element attributes and html5 element attributes

HTMLElement indicates all HTML elements.

Here we will introduce the categories of event attributes and non-event attributes.

Most event attributes are inherited from GlobalEventHandlers, and most non-event attributes are inherited from Element.

Menu

1. Obtain the HTMLElement Method

2. Non-event attributes

3. Event attributes

4. Extended reading

 

1. Obtain the HTMLElement Method

You can use DOM to directly obtain HTMLElement objects in the following four ways:

Document. getElementById (elementID): gets the first element of the specified ID.

Document. getElementsByName (className): gets an array of elements whose class attribute contains the specified value.

Document. getElementsByName (nameValue): gets an array of elements whose name attribute is specified.

Document. getElementsByTagName (elementName) and other methods to obtain the specified element: Get an array of elements with the specified element name.

 

2. Non-event attributes

Description: Contains attributes inherited from the Element and its own uniqueness.

Attribute name	Attribute type	Description
Element. attributesRead-Only	NamedNodeMap	Obtains all attribute set objects of this element.
HTMLElement. contentEditable	"True", "false" or "Inherit" (default)	Obtains or sets the Editable status of an element.
Element. childrenRead-Only	HTMLCollection	Obtains an array containing the child element of the element.
Element. classListRead-Only	DOMTokenList	Obtains an array containing the element class.
Element. className	DOMString	Sets or obtains the class attribute of an element. Eg: <button class = "a B"> </buttom> => 'a B'
Element. clientHeightRead-Only	Double	Obtains the pixel height inside the element. It contains the padding, but does not include the horizontal scroll bar, border, or margin.
Element. clientLeftRead-Only	Double	Obtains the pixel width of the Left Border of an element. Excluding the left and left margins.
Element. clientTopRead-Only	Double	Obtains the pixel width of the top border of an element. Excluding the top or top margins
Element. clientWidthRead-Only	Double	Obtains the internal pixel width of an element. Includes the padding, but does not include the vertical scroll bar, border, and margin.
HTMLElement. datasetRead-Only	DOMStringMap	Obtains an array of all custom data attributes starting with "data-" that contain this element.
HTMLElement. dir	DOMString	Set or obtain the writing direction of the element content
HTMLElement. draggable	Boolean	Sets or obtains whether an element can be dragged.
HTMLElement. hidden	Boolean	Sets or obtains whether the element is hidden.
HTMLElement. id	DOMString	Sets or obtains the element id.
HTMLElement. isContentEditableRead-Only	Boolean	Obtains whether the content of an element is editable.
Element. innerHTML	DOMString	Get the content in the element in HTML code format.
Element. innerText	DOMString	Set or obtain the text content in the element.
Element. namespaceURIRead-Only	DOMString	Obtain the namespace of an element.
HTMLElement. offsetHeightRead-Only	Double	Obtains the pixel height of an element. The height includes the padding, border, scroll bar, and css height.
HTMLElement. offsetLeftRead-Only	Double	Obtains the Left Border between the upper left corner of the current element and the HTMLElement. offsetParent node. The offset pixel value.
HTMLElement. offsetParentRead-Only	Element	Obtains the parent element of an element.
HTMLElement. offsetTopRead-Only	Double	Obtains the distance between an element and its offsetParent element from the top.
HTMLElement. offsetWidthRead-Only	Double	Obtains the pixel width of an element, including the padding, border, scroll bar, and content width.
HTMLElement. style	CSSStyleDeclaration	Sets or obtains the style object of an element.
Element. scrollHeightRead-Only	Double	Obtains the height of the content area of an element. Includes margins and content, not horizontal scroll bars. If the value obtained is smaller than clientHeight, clientHeight is returned.
Element. scrollLeft	Double	Sets or obtains the distance from the horizontal scroll bar of an element to the leftmost.
Element. scrollTop	Double	Sets or obtains the distance from the vertical scroll bar of an element to the top.
Element. scrollWidthRead-Only	Double	Obtains the width of the content area of an element. Including margins and content, not vertical scroll bars. If the obtained value is smaller than clientWidth, clientWidth is returned.
HTMLElement. tabIndex	Long	Set or obtain the tab order of Elements
Element. tagNameRead-Only	DOMString	Obtain the element name, which is returned in the uppercase/lowercase format. Eg: <div> </div> // => DIV
HTMLElement. title	DOMString	Set or obtain the title of an element

 

3. Event property 3.1 inherits the event property from GlobalEventHandlers.

Attribute name	Event Description
Onabort	Interruption events, such as the interrupted download of img.
Onblur	Triggered when the element loses focus
Onerror	Triggered when an error occurs, such as a Js running error. You can register a global error event handler function in window to collect error reports.
Onfocus	Triggered when the element obtains the focus.
Onchange	Triggered when Element Content Changes and focus is lost
Onclick	Triggered when an element is clicked
Oncontextmenu	Triggered when a menu is right-clicked within the element range.
Ondblclick	Trigger when double-clicking an element
Ondrag	Triggered when an element is dragged.
Ondragend	Triggered when element dragging ends
Ondragenter	Triggered when other elements are dragged to the element range.
Ondragexit	This element is dragged to a drag area, and the mouse is released within the drag area, this element triggers this event
Ondragleave	Triggered when other elements are dragged out of the element range before being dragged out.
Ondragover	Triggered when other elements are dragged within the range of this element.
Ondragstart	Triggered when an element is dragged.
OnDrop	Triggered when other elements are dragged to the element range and released
Oninput	When the value of element values such as <input> and <textarea> is changed by the input device, an input event is triggered.
Onkeydown	Triggered when the element gets the focus and presses the keyboard.
Onkeypress	It is triggered when the element gets the focus and the keyboard is pressed and played once.
Onkeyup	It is triggered when the element gets the focus and the keyboard key pops up.
Onload	Triggered after element Loading
Onmousedown	When you press the mouse button within the element range
Onmouseenter	Triggered when the mouse enters the element range
Onmouseleave	Triggered when the mouse leaves the element range
Onmousemove	Triggered when the mouse moves within the element range.
Onmouseout	Triggered when the mouse leaves the element range. onmouseleave is recommended.
Onmouseover	It is triggered when the mouse moves within the element range. onmousemove is recommended.
Onmouseup	Triggered when you press the mouse within the element range.
Onmousewheel	When the mouse is used in the element range, it will trigger
Onscroll	Triggered when the element is rolled. It includes horizontal and vertical scrolling.

Note:: The difference between mouseover/mouseout and mouseenter/mouseleave can be found at this link: events-mouseevent-event-order

 

3.2 event attributes

Attribute name	Event Description
OnTouchStart	Start to touch within the element range
OnTouchEnd	End touch on Element
OnTouchMove	Touch and move within the element range
OnTouchEnter	Touch points enter the element range
OnTouchLeave	Touch points exit Element range
OnTouchCancel	Touch ends within the element range

 

4. Extended reading

HTMLElement: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

Element: https://developer.mozilla.org/zh-CN/docs/Web/API/Element

GlobalEventHandlers: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers

Partial Online Demo: http://www.akmsg.com/WebDemo/HTML5-HTMLElementAttr.html

 

====================================== Series of articles ==============================================

This article: Introduction to 6.8 HTML5 element attributes

Web development path Series