NodeList vs. HTMLCollection: Der Unterschied zwischen Live- und statischen Sammlungen-js-Tutorial-php.cn

NodeList vs. HTMLCollection: Der Unterschied zwischen Live- und statischen Sammlungen

Mary-Kate Olsen

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

Original

827 Leute haben es durchsucht

wir werden NodeList und HTMLCollection im Detail untersuchen und was die NodeList und HTMLCollection.

sind

Erstens verfügen beide über eine Längeneigenschaft, die die Anzahl der Elemente in der Liste (Sammlung) zurückgibt.

1. HTMLCollection

HTMLCollection im HTML-DOM ist live; getElementsByClassName() oder getElementsByTagName() gibt eine Live-HTMLCollection zurück, die ein Array-ähnliches Objekt aller untergeordneten Elemente darstellt, die alle angegebenen Klassennamen haben .

Beispiel :

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

Nach dem Login kopieren

Ausgabe:

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

HTMLCollection wird automatisch aktualisiert, wenn das zugrunde liegende Dokument geändert wird.

Lassen Sie uns ein Beispiel schreiben:

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

Nach dem Login kopieren

Ausgabe:

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Die von querySelectorAll() zurückgegebene NodeList wird nicht automatisch aktualisiert, wenn Änderungen am zugrunde liegenden Dokument vorgenommen werden, da es nicht live ist.

Lassen Sie uns ein Beispiel schreiben:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList und HTMLCollection</title>
</head>
<Körper>
    <div>





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



<p><strong>Ausgabe</strong>: </p>

Nach dem Login kopieren

Browser

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Konsole

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Wie aus den Ausgaben ersichtlich ist, wird der Browser aktualisiert, wenn ein neues HTML-Tag zum Element mit der Kartenklasse hinzugefügt wird, aber die NodeList wird nicht aktualisiert, da NodeList nicht live ist .

Die von childNodes zurückgegebene NodeList wird automatisch aktualisiert, wenn Änderungen am zugrunde liegenden Dokument vorgenommen werden, da es live ist.

Beispiel :

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList und HTMLCollection</title>
</head>
<Körper>
    <div>





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



<p><strong>Ausgabe</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>Wie aus der Ausgabe ersichtlich ist, wird die <strong>NodeList</strong> aktualisiert, <strong>da sie live ist</strong>, wenn ein neues HTML-Tag zum Element mit der Kartenklasse hinzugefügt wird.</p>


<hr>

<h2>
  
  
  Abschluss
</h2>

<p><strong>Zusammenfassend lässt sich sagen, dass eine HTMLCollection immer eine Live-Sammlung ist. Eine NodeList ist meistens eine statische Sammlung.</strong></p>

<p>Wir haben untersucht, was <strong>NodeList</strong> und <strong>HTMLCollection</strong> sind. Jetzt wissen Sie, was <strong>NodeList und HTMLCollection</strong> sind.</p>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonNodeList vs. HTMLCollection: Der Unterschied zwischen Live- und statischen Sammlungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!