JavaScript-Sammlung von DOM-Objekten - warum kann ich nicht mit Array.reverse () umkehren?

8

Was könnte das Problem mit der Umkehrung des Arrays von DOM-Objekten wie im folgenden Code sein:

%Vor%

Wenn ich in Firefox 3 die Methode reverse() aufruft, stoppt das Skript die Ausführung und zeigt den folgenden Fehler in der Konsole der Web Developer Toolbar an:

%Vor%

Die Variable imagesArr kann mit einer for-Schleife durchlaufen werden, und auf Elemente wie imagesArr[i] kann zugegriffen werden. Warum wird sie also nicht als Array beim Aufrufen der reverse() -Methode gesehen?

    
zappan 05.09.2008, 12:05
quelle

5 Antworten

13

Da getElementsByTag name tatsächlich eine NodeList-Struktur zurückgibt. Es hat ähnliche arrayähnliche Indizierungseigenschaften für syntaktische Bequemlichkeit, aber es ist nicht ein Array. Zum Beispiel wird der Satz von Einträgen tatsächlich ständig dynamisch aktualisiert - wenn Sie ein neues img-Tag unter myDivHolderId hinzufügen, wird es automatisch in imagesArr angezeigt.

Siehe Ссылка für mehr.

    
Adam Wright 05.09.2008, 12:17
quelle
8

getElementsByTag() gibt eine NodeList anstelle eines Arrays zurück. Sie können eine NodeList in ein Array konvertieren, beachten Sie jedoch, dass das Array ein anderes Objekt ist, so dass die Umkehrung die Position des DOM-Knotens nicht beeinflusst.

%Vor%

Um die Position zu ändern, müssen Sie die DOM-Knoten entfernen und sie alle wieder an der richtigen Position hinzufügen.

Array.prototype.slice.call(arrayLike, 0) ist eine großartige Möglichkeit, ein arrayähnliches Array zu einem Array zu konvertieren, aber wenn Sie eine JavaScript-Bibliothek verwenden, kann es sogar eine noch bessere / schnellere Möglichkeit bieten. Zum Beispiel hat jQuery $.makeArray(arrayLike) .

Sie können die Array-Methoden auch direkt in der NodeList verwenden:

%Vor%     
Vincent Robert 05.09.2008 13:04
quelle
2

Ich weiß, diese Frage ist alt, aber ich denke, es ist ein wenig Klärung, wie einige der Antworten hier sind muss veraltet wie W3C die Definition geändert und damit den Rückgabewert dieser Methoden getElementsByTagName() und getElementsByClassName()

Diese Methoden ab dem Zeitpunkt diese Antwort schreiben geben ein Objekt - leer oder nicht -. Vom Typ HTMLCollection und nicht NodeList

Es ist wie der Unterschied zwischen den Eigenschaften children , die ein Objekt vom Typ HTMLCollection zurück, da sie nur von Elementen und ohne Text oder Kommentar Knoten zusammengesetzt sind, und childNodes , die, da sie ein Objekt vom Typ NodeList zurück könnte auch andere Knotentypen wie Text und Kommentare enthalten.

Hinweis: ich auf Tangente hier gehen würde und meinen Mangel an Einsicht äußern, warum querySelectorAll() -Methode derzeit NodeList zurückzugibt und kein HTMLCollection , da es auf Elementknoten in dem Dokument und nichts anderes ausschließlich funktioniert.

Wahrscheinlich hat es etwas mit der möglichen Abdeckung anderer Knotentypen in der Zukunft zu tun, und sie haben sich für eine zukunftsfähigere Lösung entschieden, wer weiß das wirklich? :)

EDIT: Ich denke, ich habe die Gründe für diese Entscheidung, sich für NodeList und nicht für HTMLCollection für querySelectorAll() zu entscheiden.

Da sie HTMLCollection ausschließlich und vollständig live erstellt haben und diese Methode diese Live-Funktionalität nicht benötigt, haben sie sich stattdessen für eine NodeList -Implementierung entschieden, um ihren Zweck wirtschaftlich und effizient zu erfüllen.

    
Mr. X 20.03.2015 14:00
quelle
1

Ihre erste Zeile ist irrelevant, da sie die Zuordnung zur Variablen nicht erzwingt, funktioniert Javascript umgekehrt. imagesArr, ist nicht vom Type Array (), was immer der Rückgabetyp von getElementsByTagName ("img") ist. In diesem Fall ist es eine HtmlCollection in Firefox 3.

Die einzigen Methoden für dieses Objekt sind die Indexer und die Länge. Um rückwärts zu arbeiten, iteriere einfach rückwärts.

    
DevelopingChris 05.09.2008 12:16
quelle
1

getElementsByTag() gibt eine NodeList anstelle eines Arrays zurück. Sie müssen die NodeList in ein Array konvertieren und dann umkehren.

%Vor%     
Hemn Chawroka 29.01.2015 10:01
quelle

Tags und Links