Today my blog will address the difference between a Node and an Element.
A node is generally any object in the Document Object Model (DOM) tree. Think of it like a family. The DOM is made up of a hierarchy of nodes where each node can have a parent, child nodes, a nextSibling and previousSibling. Elements or html elements like body tag, div, and span, are a specific type of node. Nodes are the generic version of HTML elements and are made up of the many different components that create a webpage, where on the other hand elements are specified as one particular type of node, addressed with a HTML tag. Some important nodes to consider:
- Element Node
- Text Node
- Comment Node
- Document Node
- Document Type Node
The nodetype property of a node interface differentiates the nodes as document nodes, text nodes, comment nodes, and elements.
A key thing to remember while traversing the DOM is that an HTMLCollection return elements while a NodeList return nodes. Both of them may be manipulated like arrays but unlike arrays they lack the ability to be used by Higher Order Functions (HOF).
I hope my blog was able to clear up the difference between a node and an element. Thank you for taking the time to read it!