Hier sind einige englische Frage-und-Antwort-Fragentitel, die zum Inhalt Ihres Artikels passen: Prägnanterer Titel: * Was ist der Unterschied zwischen HTMLCollections, NodeLists und Arrays von Objekten im DOM? * DOM-Sammlungen: HTMLCollections, NodeLists und Arrays – Was ist los?

Die Unterschiede zwischen HTMLCollections, NodeLists und Arrays von Objekten im DOM verstehen

Bei der Arbeit mit dem DOM kommen drei wichtige Arten von Sammlungen ins Spiel: HTMLCollections, NodeLists und Arrays von Objekten. Jede dieser Sammlungen dient einem bestimmten Zweck und hat ihre eigenen einzigartigen Eigenschaften.

HTMLCollections vs. NodeLists

HTMLCollections stellen Sammlungen von HTML-Elementen dar, die einem bestimmten Tag-Namen entsprechen. Sie werden von der Methode getElementsByTagName() des Document-Objekts zurückgegeben. HTMLCollections sind live, was bedeutet, dass sie automatisch alle am DOM vorgenommenen Änderungen widerspiegeln. Sie bieten auch direkten Zugriff auf einzelne Elemente nach Index.

NodeLists hingegen sind Sammlungen aller Arten von Knoten (einschließlich HTML-Elementen, Textknoten und Kommentaren). Sie werden von verschiedenen DOM-Methoden zurückgegeben, beispielsweise querySelectorAll() und childNodes(). NodeLists sind statisch, was bedeutet, dass sie keine Änderungen im DOM widerspiegeln, es sei denn, sie werden explizit aktualisiert.

jQuery-Objekte im Vergleich zu HTMLCollections und NodeLists

jQuery-Objekte stehen nicht in direktem Zusammenhang mit HTMLCollections oder NodeLists. jQuery-Objekte sind JavaScript-Objekte, die DOM-Auswahlen kapseln. Sie bieten eine praktische Schnittstelle zum Bearbeiten von DOM-Elementen und zum Erweitern ihrer Funktionalität mithilfe der umfangreichen API von jQuery.

jQuery-Auswahlen können Elemente, Textknoten oder jeden anderen Knotentyp umfassen. Wie NodeLists sind jQuery-Auswahlen statisch. Sie können jedoch mit der Methode $(...).live() von jQuery in Live-HTMLCollections konvertiert werden.

JavaScript-Arrays und -Sammlungen

Zusätzlich zu HTMLCollections und NodeLists können Sie auch erstellen Arrays von Objekten in JavaScript. Beispielsweise können Sie DOM-Elemente wie folgt in einem Array speichern:

<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>

Arrays in JavaScript sind dynamisch und spiegeln keine am DOM vorgenommenen Änderungen wider. Sie bieten auch keinen Zugriff auf bestimmte Methoden wie HTMLCollections oder jQuery-Objekte.

Beispiel und Demonstration

Das folgende Skript zeigt die wichtigsten Unterschiede zwischen diesen Sammlungstypen:

<code class="javascript">$(function(){
    console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
    console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
    console.log('Node=',Node);
    console.log('document.links=',document.links);
    console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
    console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
    console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
    console.log('$("#myTable")=',$("#myTable"));
    console.log('$("td")=',$("td"));
});</code>

Dieses Skript protokolliert die folgende Ausgabe:

[123,"abc",321,"cba"]=[123, "abc", 321, "cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= undefined
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= 

document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow] document.getElementsByTagName("td")= HTMLCollection[td, td, td, td] jQuery("#myTable")= [table#myTable] jQuery("td")= [td, td, td, td]

Das obige ist der detaillierte Inhalt vonHier sind einige englische Frage-und-Antwort-Fragentitel, die zum Inhalt Ihres Artikels passen: Prägnanterer Titel: * Was ist der Unterschied zwischen HTMLCollections, NodeLists und Arrays von Objekten im DOM? * DOM-Sammlungen: HTMLCollections, NodeLists und Arrays – Was ist los?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!