Heim > Artikel > Web-Frontend > NodeList vs. HTMLCollection: Der Unterschied zwischen Live- und statischen Sammlungen

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

Mary-Kate OlsenOriginal: 2024-11-06 13:00:03830Durchsuche

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)

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)

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>

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>

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!

html Static Array Object const class Length Property Collection console number dom innerHTML viewport li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verwende ich bedingte Typen in Typoskript?Nächster Artikel：Wie verwende ich bedingte Typen in Typoskript?

In Verbindung stehende Artikel

Mehr sehen