Wie unterscheiden sich HTMLCollections, NodeLists und Object Arrays bei der DOM-Manipulation?

Unterscheidung von HTMLCollections, NodeLists und Objektarrays in DOM

Beim Zugriff auf DOM-Knoten stoßen Entwickler häufig auf HTMLCollections, NodeLists und Objektarrays. Das Verständnis der Unterschiede zwischen diesen Datenstrukturen ist entscheidend, um die Dokumentstruktur effektiv zu manipulieren.

HTMLCollections vs. NodeLists

HTMLCollections und NodeLists weisen als Knotensammlungen Ähnlichkeiten auf, haben es aber dennoch Besondere Merkmale:

• Inhalt: HTMLCollections enthalten nur Elementknoten, während NodeLists jede Art von Knoten enthalten kann.
• Methoden: In Zusätzlich zu den Methoden, die allen Sammlungen gemeinsam sind, stellen HTMLCollections die Methode „namedItem“ für den Zugriff auf Elemente nach Namen bereit.

Live vs. Snapshot-Sammlungen

DOM-Sammlungen können beides sein Live oder Snapshot:

• Live: Sammlungen werden automatisch aktualisiert, wenn Änderungen am DOM vorgenommen werden.
• Snapshot: Sammlungen bleiben fixiert, unabhängig von DOM-Änderungen.

DOM-Sammlungen, die von Browsermethoden (z. B. getElementsByTagName) zurückgegeben werden, sind normalerweise live, während jQuery-Auswahlen Schnappschüsse sind.

Arrays vs. Objekt-Arrays

Während jQuery-Objekte als Arrays in Konsolenprotokollen angezeigt werden, handelt es sich tatsächlich um Objektarrays:

• Arrays: Sequentielle Sammlungen, auf die über numerische Indizes zugegriffen wird.
• Objektarrays:Arrays, bei denen auf Elemente sowohl über numerische als auch benannte Eigenschaften zugegriffen wird.

Auswählen von Knoten

Dokumentmethoden verwenden:

• document.getElementsByTagName("td"): Gibt eine HTMLCollection aller td-Elemente zurück.
• document.getElementsByClassName("myRow"): Gibt zurück eine NodeList aller Elemente mit der Klasse „myRow“.

Verwendung von jQuery:

• $("td"): Wählt alle td-Elemente aus und gibt ein jQuery-Objekt, ein Objektarray, zurück.

Beispielskript

Das bereitgestellte Skript veranschaulicht die Unterschiede zwischen Datenstrukturen:

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: Vergleicht Arrays.
• console. log('{123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: Vergleicht Objektarrays mit Objektsyntax.
• console.log('Node=',Node): Protokolliert das globale Node-Objekt, bei dem es sich um ein Objektarray handelt, das Knotentypen darstellt.
• console.log('document. links=',document.links): Protokolliert eine HTMLCollection von Links.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): Protokolliert eine einzelne Element, keine Sammlung.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): Protokolliert eine NodeList von Elementen mit der Klasse „myRow“.
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): Protokolliert eine HTMLCollection aller td-Elemente.
• console.log( '$("#myTable")=',$("#myTable")): Protokolliert ein jQuery-Objekt, das das #myTable-Element darstellt.
• console.log('$("td")=', $("td")): Protokolliert ein jQuery-Objektarray, das alle td-Elemente enthält.

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich HTMLCollections, NodeLists und Object Arrays bei der DOM-Manipulation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!