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 von entscheidender Bedeutung, um die Dokumentstruktur effektiv zu manipulieren.

HTMLCollections vs. NodeLists

HTMLCollections und NodeLists haben Ähnlichkeiten als Knotensammlungen, aber sie haben Ähnlichkeiten Besondere Merkmale:

• Inhalt: HTMLCollections enthalten nur Elementknoten, während NodeLists jeden Knotentyp enthalten können.
• 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 Collections

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

• Live: Sammlungen werden automatisch aktualisiert, wenn Änderungen am DOM vorgenommen werden.
• Snapshot: Sammlungen bleiben unverändert, 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. Objektarrays

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, in 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“.

Verwenden 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 der 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 ein einzelnes Element, nicht ein Collection.
• 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.