NodeList and HTMLCollection : Live collection and Static collection
we will examine NodeList and HTMLCollection in detail and what the NodeList and HTMLCollection.
First, Both have a length property that returns the number of elements in the list (collection).
1. HTMLCollection
HTMLCollection in the HTML DOM is live; getElementsByClassName() or getElementsByTagName() returns a live HTMLCollection representing an array-like object of all child elements which have all of the given class names.
Example :
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="items">
item-1
item-2
item-3
item-4
class="items">
item-5
item-6
item-7
item-8
class="items">
item-9
item-10
item-11
item-12
"/script.js">
const selected = document.getElementsByClassName("items")
console.log(selected)
Output :
HTMLCollection is automatically updated when the underlying document is changed.
Let’s write an example :
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `dev.to `;
console.log(selected)
Output :
As can be seen from the output, when a new HTML tag is added to the element with the card class, the HTMLCollection is updated because it is live
2. NodeList
querySelectorAll() returns a static (non live) NodeList representing a list of the document’s elements that match the specified group of selectors. but childNodes return a live NodeList.
Example :
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="items">
item-1
item-2
item-3
item-4
class="items">
item-5
item-6
item-7
item-8
class="items">
item-9
item-10
item-11
item-12
"/script.js">
const selected = document.querySelectorAll(".items")
console.log(selected)
Output :
The NodeList returned by querySelectorAll() is not automatically updated when changes are made to the underlying document because its non live.
Let’s write an example :
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `dev.to `;
console.log(selected)
Output :
As can be seen from the outputs, when a new HTML tag is added to the element with the card class, the browser updates, but the NodeList is not updated because NodeList is not live.
The NodeList returned by childNodes is automatically updated when changes are made to the underlying document because its live.
Example :
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
const selected = document.querySelector(".card")
selected.innerHTML += `dev.to `;
console.log(selected.childNodes)
Output :
As can be seen from the output, when a new HTML tag is added to the element with the card class, the NodeList is updated because it is live.
Conclusion
In conclusion, an HTMLCollection is always a live collection. A NodeList is most often a static collection.
We examined what NodeList and HTMLCollection are. Now you know what NodeList and HTMLCollection are.
