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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList and HTMLCollection</title>
</head>
<body>
<ul class="items">
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>
<ul class="items">
<li>item-5</li>
<li>item-6</li>
<li>item-7</li>
<li>item-8</li>
</ul>
<ul class="items">
<li>item-9</li>
<li>item-10</li>
<li>item-11</li>
<li>item-12</li>
</ul>
<script src="/script.js"></script>
</body>
</html>
const selected = document.getElementsByClassName("items")
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 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeList and HTMLCollection</title>
</head>
<body>
<ul class="items">
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>
<ul class="items">
<li>item-5</li>
<li>item-6</li>
<li>item-7</li>
<li>item-8</li>
</ul>
<ul class="items">
<li>item-9</li>
<li>item-10</li>
<li>item-11</li>
<li>item-12</li>
</ul>
<script src="/script.js"></script>
</body>
</html>
const selected = document.querySelectorAll(".items")
console.log(selected)
Output :
Console
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.
SOCIAL SHARE CARD GENERATOR