Node knows about parents, children and text; Element adds tags, attributes, geometry and shadow roots; Document is the root and the factory for new nodes. The ParentNode and ChildNode mixins add the modern convenience methods.
| Interface | Key properties | Key methods |
|---|---|---|
| Node | nodeType, parentNode, childNodes, textContent | appendChild(), cloneNode(), contains(), normalize() |
| Element | tagName, innerHTML, shadowRoot | getBoundingClientRect(), attachShadow(), setHTML() |
| Document | documentElement, body, activeElement, fonts | createElement(), importNode(), elementsFromPoint() |
| Mixins | children, firstElementChild, nextElementSibling | append(), before(), remove(), moveBefore() |
Classic Node methods take one node and need the parent; mixin methods take any number of nodes or strings and are called on the node you hold, so prefer them. Members named ...Element... and children skip text and comment nodes; childNodes and nextSibling do not.