In the HTML DOM, the element object represents an HTML element .
Elements of the object of the child nodes may be, can be an element node, text node, comment node.
NodeList object represents a node list, similar to the HTML element child nodes collection.
Element object properties and methods
1. The elements of the characteristic attributes associated
element.id set / return element id
element.tagName Sets / returns the element tag name
element.dir set / return the direction of text elements
element.accessKey set shortcut keys / return element
element.draggable set / return whether a drag element
element.lang Sets / returns language elements
element.tabIndex set / Tab key in the order of traversal of the return element, it represents a non-traversed -1
element.hidden Sets / returns element is visible
element.contentEditable Sets / returns whether the element can be edited
Are element.isContentEditable return element editable
2. The relevant elements of state property
element.attributes set / return attributes element array returns a similar object.
element.className Sets / returns the class name of the element, its value is a string, separated by a space between each class
element.classList set / return element class name, returns a similar array of objects.
element.innerHTML set / return all elements included in the HTML code
3. box model related properties
CSS returns element.clientHeight height of the element, only the effective block-level elements, the row 0 elements returned. In addition to the height of the element itself, further comprising a padding (not including the border, margin). If you have a scroll bar even minus the horizontal scroll bar height.
document.body.clientHeight total page height greater than> document.documentElement.clientHeight browser window height (minus scroll bar height)
element.clientLeft, element.clientTop returns the width of the element left border, padding and margin does not include
element.scrollHeight, element.scrollWidth returns the total height of the current element, including the overflow container sectors, including padding, pseudo-elements does not include the height of border, margin, scroll bar.
element.scrollLeft, element.scrollTop scroll to the right to return the element px current
If you want to see the level of the whole page and vertical scrolling distance from the document.documentElementreading on elements
element.offsetHeight, element.offsetWidth Returns the vertical height of the element, including heigth, padding, border, scrollbar height.
element.offsetLeft, element.offsetTop returns the current top left corner of the displacement element
4. Node Properties
element.appendChild () to add a new child element to element
element.children, element.childElementCount
element.firstElementChild, element.lastElementChild
element.nextElementSibling, element.previousElementSibling
element.offsetParent
The properties related method
element.getAttribute () Returns the value of the attribute of the same name
element.setAttribute()
element.removeAttribute()
element.hasAttribute()
element.querySelector () returns the first matching element
getElementsByTagName Returns the tag name of all sub-elements of the collection
getElementsByClassName
6. Event
Monitor events are inherited EventTarget Interface
element.addEventListener () function to add event listeners
element.removeEventListener () removed
dispatchEvent () trigger events
scrollIntoView () to scroll to the current element
element.focus () get focus setting element
Supplementary: DOM event object https://www.runoob.com/jsref/dom-obj-event.html