DOM Node Lists


HTML DOM NodeList Object

  • NodeList object is a list (collection) of nodes extracted from a HTML document.
  • NodeList object is almost the same as an HTMLCollection object.
  • Some (older) browsers return a NodeList object instead of an HTMLCollection for methods like getElementsByClassName().
  • All browsers return a NodeList object if user use the property childNodes
  • Mostly browsers return a NodeList object for the method querySelectorAll().
  • The following code selects all <p> nodes in a document:
var myNodes = document.querySelectorAll("p");

The elements in the NodeList can be get by an index number.

To access the second <p> node user can use:

n = myNodes[1];
Input:-
<!DOCTYPE html>
<html>
<body>

<h2>HTML DOM</h2>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p id="result"></p>

<script>
var myNodes = document.querySelectorAll("p");
document.getElementById("result").innerHTML =
"The innerHTML of the second paragraph is: " +
myNodes[1].innerHTML;
</script>

</body>
</html>

Output :-

Note:- The index starts at 0


HTML DOM Node List Length

The length property defines the number of nodes in a node list:

Example 1:-
Input:-
<!DOCTYPE html>
<html>
<body>

<h2>HTML DOM</h2>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p id="result"></p>

<script>
var myNodes = document.querySelectorAll("p");
document.getElementById("result").innerHTML =
"This document contains " + myNodes.length + " paragraphs.";
</script>

</body>
</html>

Output :-

Example explained:

  1. Create a list of all <p> elements
  2. Display the length of the list

The length property is useful when you want to loop through the nodes in a node list:

Example 2:-
Input:-
<!DOCTYPE html>
<html>
<body>

<h2>HTML DOM</h2>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p>Click the button to change the color of all p paragraph.</p>

<button onclick="myFunc()">Click me</button>

<script>
function myFunc() {
  var myNodes = document.querySelectorAll("p");
  var i;
  for (i = 0; i < myNodes.length; i++) {
    myNodes[i].style.background = "grey";
    myNodes[i].style.color = "white";
  }
}
</script>

</body>
</html>

Output (Before Click):-

Output (After Click):-


Difference Between an HTMLCollection and a NodeList

  1. An HTMLCollection is a collection of HTML elements while NodeList is a collection of document nodes.
    1. Both HTMLCollection object and a NodeList object is an array-like list (collection) of objects.
    1. Both have length property defining the number of items in the list (collection).
    1. Both provide an index (0, 1, 2, 3, 4, …) to access each item like an array.
    1. HTMLCollection items can be accessed by their name, id, or index number while NodeList items can only be accessed by their index number.
    1. Only the NodeList object can contain attribute nodes and text nodes.

Note:-

An node list  may look like an array, but it is not.

You can loop through the node list and refer to the elements with a number (just like an array)

However, you cannot use array methods like valueOf(), pop(), push(), or join() on an node list.