NodeList and HTMLCollection : Live collection and Static collection-JS Tutorial-php.cn

NodeList and HTMLCollection : Live collection and Static collection

DDD

Release： 2024-11-06 02:46:02

Original

1015 people have browsed it

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>

Copy after login

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

Copy after login

Output :

NodeList and HTMLCollection : Live collection and Static collection

HTMLCollection is automatically updated when the underlying document is changed.

Let's write an 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>
    <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>
</body>
</html>

Copy after login

const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Copy after login

Output :

NodeList and HTMLCollection : Live collection and Static collection

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>

Copy after login

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

Copy after login

Output :

NodeList and HTMLCollection : Live collection and Static collection

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 :

<!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>
    <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>
</body>
</html>

Copy after login

const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Copy after login

Output :

Browser

NodeList and HTMLCollection : Live collection and Static collection

Console

NodeList and HTMLCollection : Live collection and Static collection

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 :

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

Copy after login

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

Copy after login

Output :

NodeList and HTMLCollection : Live collection and Static collection

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!