Nodes aren't always HTML elements

All cars are vehicles, but not all vehicles are cars. All thumbs are fingers, but not all fingers are thumbs. All Jacuzzis are hot tubs, but not all hot tubs are Jacuzzis. In the same vein, all HTML elements are nodes, but not all nodes are HTML elements.

The Element interface inherits from the Node interface.

Everything available to the Node interface is also available to the Element interface. But this doesn’t work both ways.

I higlighted this recently when I wrote about the difference between the nodeName and tagName properties.

The nodeName property considers all types of node, whereas the tagName property only considers Element nodes.

This is because some types of node, like Comment and Text, are not real HTML elements. This means they don’t have a tag name.

But they’re still types of node.

While their tagName properties will be undefined, their nodeName properties will be #comment and #text, respectively.

Here’s a non-exhaustive list I made:

Properties that consider all nodes vs Element nodes only
All nodes Element nodes only
parentNode parentElement
childNodes children
firstChild firstElementChild
lastChild lastElementChild
nextSibling nextElementSibling
previousSibling previousElementSibling

Understanding this distinction will help you avoid weird “gotchas” 🙂

If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!