DEV Community


Posted on

HTML Node vs Element & The Difference.

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">

    <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>

    <!-- This is comment node -->
    <h2>This is heading</h2>
    <p>This is paragraph</p>

Enter fullscreen mode Exit fullscreen mode

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)