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 :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>


      

• item-1
• item-2
• item-3
• item-4

• item-5
• item-6
• item-7
• item-8

• item-9
• item-10
• item-11
• item-12

const selected = document.getElementsByClassName("items")
console.log(selected)

Output :

---

HTMLCollection is automatically updated when the underlying document is changed.

Let's write an example :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>


    <div class="card">
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>

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 :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>


      

• item-1
• item-2
• item-3
• item-4

• item-5
• item-6
• item-7
• item-8

• item-9
• item-10
• item-11
• item-12

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 :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>


    <div class="card">
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>

const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `

dev.to

`; console.log(selected)

Output :

• Browser

• Console

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 :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>


      

• item-1
• item-2
• item-3
• item-4

• item-5
• item-6
• item-7
• item-8

• item-9
• item-10
• item-11
• item-12

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

The above is the detailed content of NodeList and HTMLCollection : Live collection and Static collection. For more information, please follow other related articles on the PHP Chinese website!