Javascript collection d'objets DOM - pourquoi je ne peux pas inverser avec le Tableau.reverse()?

Question

Quel pourrait être le problème avec l'inversion de la matrice des objets DOM comme dans le code suivant:

var imagesArr = new Array();
imagesArr = document.getElementById("myDivHolderId").getElementsByTagName("img");
imagesArr.reverse();

Dans Firefox 3, lorsque j'appelle l' reverse() méthode le script s'arrête l'exécution et affiche l'erreur suivante dans la console de la Web Developer Toolbar:

imagesArr.reverse is not a function

L' imagesArr variable peut être itéré avec l'aide d'une boucle for et des éléments comme imagesArr[i] peut être consulté, alors pourquoi n'est-il pas considéré comme un tableau lors de l'appel de la reverse() méthode?

Answer 1

Parce que getElementsByTag nom renvoie en fait une NodeList structure.Il a le même tableau, par exemple l'indexation des propriétés syntaxiques de commodité, mais il est pas d'un tableau.Par exemple, l'ensemble des entrées est en fait constamment mis à jour dynamiquement - si vous ajoutez une nouvelle balise img en vertu de myDivHolderId, il apparaîtra automatiquement dans imagesArr.

Voir http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177 pour plus d'.

Answer 2

getElementsByTag() renvoie une NodeList au lieu d'un Tableau.Vous pouvez convertir une NodeList à un Tableau, mais notez que le tableau sera un autre objet, afin d'inverser cela n'affectera pas les nœuds DOM position.

var listNodes = document.getElementById("myDivHolderId").getElementsByTagName("img");
var arrayNodes = Array.slice.call(listNodes, 0);
arrayNodes.reverse();

Pour changer la position, vous devrez retirer les nœuds DOM et ajouter le tout à nouveau dans la bonne position.

Array.prototype.slice.call(arrayLike, 0) est un excellent moyen de convertir un tableau comme un tableau, mais si vous utilisez une bibliothèque JavaScript, il peut effectivement fournir un encore mieux/plus rapide façon de le faire.Par exemple, jQuery a $.makeArray(arrayLike).

Vous pouvez également utiliser les méthodes de Tableau directement sur la NodeList:

Array.prototype.reverse.call(listNodes);

Answer 3

getElementsByTag() renvoie une NodeList au lieu d'un Tableau.Vous avez besoin de convertir le NodeList à un tableau puis de l'inverser.

var imagesArr = [].slice.call(document.getElementById("myDivHolderId").getElementsByTagName("img"), 0).reverse();

Answer 4

Je sais que cette question est vieux, mais je pense qu'il a besoin d'un peu de précisions que certaines des réponses ici sont obsolètes comme le W3C a changé la définition, et par conséquent la valeur de retour de ces méthodes getElementsByTagName() et getElementsByClassName()

Ces méthodes au moment de la rédaction de cette réponse retourne un objet vide ou non, de type HTMLCollection et pas NodeList.

C'est comme la différence entre les propriétés children qui retourne un objet de type HTMLCollection puisque c'est uniquement composé d'éléments et à l'exclusion de texte ou un commentaire nœuds, et childNodes qui retourne un objet de type NodeList car il pourrait contenir d'autres types de nœuds, comme du texte et les commentaires.

Note:J'irais sur la tangente ici et d'exprimer mon manque de connaissances sur pourquoi querySelectorAll() méthode retourne un NodeList et pas un HTMLCollection depuis, il travaille exclusivement sur les nœuds d'élément dans le document et rien d'autre.

Sans doute il a quelque chose à voir avec le potentiel de la couverture d'autres types de nœuds dans l'avenir et ils sont allés pour une solution fiable pour l'avenir, qui sait vraiment?:)

EDIT:Je crois que j'ai la justification de cette décision à opter pour un NodeList et pas un HTMLCollection pour l' querySelectorAll().

Depuis qu'ils ont construit HTMLCollection pour être exclusivement et entièrement en direct et étant donné que cette méthode n'a pas besoin de cette fonctionnalité, ils ont décidé pour un NodeList mise en place afin de mieux servir ses fins de manière économique et efficace.

Answer 5

La première ligne est pertinent, car il ne veut pas forcer l'affectation de la variable javascript fonctionne dans l'autre sens.imagesArr, n'est pas de Type Array(), de la même quel que soit le type de retour de getElementsByTagName("img") est.Dans ce cas, son un HtmlCollection dans Firefox 3.

Les seules méthodes de cet objet, sont les indexeurs, et de la longueur.Afin de travailler dans le sens inverse, juste itérer en arrière.