Hello!
Today my blog will address the difference between a Node and an Element.
Node vs. 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.
Everything shown in this example below taken from is a node.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node VS Element in JavaScript DOM</title> </head>
<body>
<!-- This is comment node -->
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
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!
-Christopher Nance
Top comments (0)