search

Home >Web Front-end >JS Tutorial >NodeList and HTMLCollection : Live collection and Static collection

NodeList and HTMLCollection : Live collection and Static collection

DDD
DDDOriginal
2024-11-06 02:46:021014browse

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 :

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>


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

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>


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

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>


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

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>


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

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!

html Static Array Object class Length Property Collection console number dom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Is Leveraging Browser HTML Parsing the Most Efficient Way to Escape HTML Tag Entities?Next article：Is Leveraging Browser HTML Parsing the Most Efficient Way to Escape HTML Tag Entities?

Related articles

See more