NodeList vs HTMLCollection: The Difference Between Live and Static Collections-JS Tutorial-php.cn

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Mary-Kate Olsen

Release： 2024-11-06 13:00:03

Original

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





<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("items")
console.log(selected)

Copy after login

Output :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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>





<pre class="brush:php;toolbar:false">const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li>



<p><strong>Output</strong> : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173086920639726.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>

<p>As can be seen from the output, when a new HTML tag is added to the element with the card class, the <strong>HTMLCollection</strong> is updated <strong>because it is live</strong></p>


<hr>

<h2>
  
  
  2. NodeList
</h2>

<p><strong>querySelectorAll()</strong> returns a <strong>static</strong> <strong>(non live)</strong> <strong>NodeList</strong> representing a list of the document's elements that match the specified group of selectors. but <strong>childNodes</strong> return a <strong>live NodeList</strong>. </p>

<p><strong>Example</strong> :<br>
</p>

<pre class="brush:php;toolbar:false"><!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>





<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".items")
console.log(selected)

Copy after login

Output :

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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>





<pre class="brush:php;toolbar:false">const selected = document.querySelectorAll(".card")
selected[0].innerHTML  = `<li>



<p><strong>Output</strong> : </p>

Copy after login

Browser

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Console

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

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





<pre class="brush:php;toolbar:false">const selected = document.querySelector(".card")
selected.innerHTML  = `<li>



<p><strong>Output</strong> : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173086921039201.jpg" alt="NodeList vs HTMLCollection: The Difference Between Live and Static Collections"></p>

<p>As can be seen from the output, when a new HTML tag is added to the element with the card class, the <strong>NodeList</strong> is updated <strong>because it is live</strong>.</p>


<hr>

<h2>
  
  
  Conclusion
</h2>

<p><strong>In conclusion, an HTMLCollection is always a live collection. A NodeList is most often a static collection.</strong></p>

<p>We examined what <strong>NodeList</strong> and <strong>HTMLCollection</strong> are. Now you know what <strong>NodeList and HTMLCollection</strong> are.</p>

Copy after login

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