So we can say that nodes are everything in the document and elements are part of the nodes.
The main difference is that the properties and methods available in nodes are also available in elements. But some properties and methods are special for elements, they are only available in elements not in nodes.
In the above example, everything we can see is a node. For example,
<!-- ... -->,
<p> etc. The text we use inside the HTML tag is also a node. This is known as a text node.
But if you think about elements, they only contain HTML tags. That is,
<div> etc are known as elements. So we can say an element is a special type of node.
In the list, you can see that all HTML elements in the document are
ELEMENT_NODE type. So, the node is consist of all these types where an element is a part of it.
Every node type also has a value assigned to it. Using this value you can identify or check the node type in your program if it is necessary.
You can get the value using
nodeType property. I will discuss this in detail in the next section.
const p = document.getElementById('paragraph'); console.log(p.nodeType); // 1 console.log(p.nodeType === Node.ELEMENT_NODE); // true
For example, you have a paragraph tag with the
id "paragraph" in your document. First, you can get the element using
getElementById() method. This method always returns an
Now if you access
nodeType property on the paragraph element, it will give the value. As it is an
ELEMENT_NODE, it will give the value 1.
I checked if my paragraph
nodeType is equal to
ELEMENT_NODE. If they are equal, it will return
false. In this way, you can easily check inside your conditions.
In simple terms, NodeList is a collection of nodes. It is an array that contains all types of nodes. On the other hand, HTMLCollection is the collection of HTML elements. It is also an array but only contains HTML elements i.e.
In the above example, you can see that when I access the
children property, it returns HTMLCollection. Here, the array only contains 3 items. They all are HTML elements.
But when I access the
childNodes property, it returns NodeList. Here, the array contains 11 items. Because this time array also has text and comments in it which are not element nodes.
This is the basic difference between NodeList and HTMLCollection. NodeList can have all types of nodes but HTMLCollection can only have HTML elements.
Other differences between NodeList and HTMLCollection are:
- HTMLCollection does not have any array methods like
forEach()etc. But NodeList does have
forEach()method. It is the only array method it does have.
Properties of Node
- Node.baseURI (Read only)
- Node.childNodes (Read only)
- Node.firstChild (Read only)
- Node.lastChild (Read only)
- Node.nextSibling (Read only)
- Node.nodeName (Read only)
- Node.nodeType (Read only)
- Node.parentNode (Read only)
Methods of Node
To know more details check out this complete guide on the Node.
Here is the list of some additional properties and methods that elements have along with the previous node properties and methods:
Properties of Element
- Element.attributes (Read only)
- Element.childElementCount (Read only)
- Element.children (Read only)
- Element.classList (Read only)
- Element.clientHeight (Read only)
- Element.clientWidth (Read only)
- Element.scrollHeight (Read only)
Methods of Element
To know more details check out this complete guide on Element.
Which One You Should Use between Node and Element?
In programming, everything has its own use case according to the requirements of your application.
As an element has all the properties and methods that a node has, you can do almost everything you need with the element.
The elements also have some additional properties and methods that nodes don't have. Nodes have some limitations in terms of functionality.
But if you need to loop over or need to use the array method, NodeList is the best as it has
You must be careful how you get your NodeList. If you use the method
getElementsByTagName(), these methods will return NodeList. But the problem is, that list will contain all types of nodes like text, comments, etc.
When you get a list of nodes with unnecessary things like comments, it becomes hard to work with. Because often we just need a list of elements.
In this case, you should use
querySelectorAll() method to get a NodeList. This method will also return NodeList but in this case, this list will only contain the elements.
So, with this method, you can get a list of elements, and as it is a NodeList you also have access to
forEach() method. You can use
forEach() method to loop over the list.
Differences between nodes and elements are very small. That is why most of the time new developers face difficulty understanding those differences.