Comment convertir une liste de noeuds DOM en un tableau en Javascript?

Question

J'ai une fonction Javascript qui accepte une liste de HTML nœuds, mais il s'attend à un tableau Javascript (il s'exécute certaines méthodes de Tableau sur) et je tiens à le nourrir à la sortie de l' Document.getElementsByTagName qui retourne un nœud DOM liste.

Au départ, je pensais de l'aide de quelque chose de simple comme:

Array.prototype.slice.call(list,0)

Et qui fonctionne très bien dans tous les navigateurs, sauf Internet Explorer qui renvoie l'erreur "JScript objet attendu", car apparemment le nœud DOM liste retournée par Document.getElement* méthodes n'est pas un objet de JScript assez d'être la cible d'un appel de fonction.

Mises en garde: je n'ai pas l'esprit de l'écriture spécifiques à Internet Explorer de code, mais je ne suis pas autorisé à utiliser toutes les bibliothèques Javascript comme JQuery parce que je suis en train d'écrire un widget pour être intégré dans la 3ème partie du site web, et il est impossible de charger des bibliothèques externes qui va créer des conflits pour les clients.

Mon ultime effort est d'itérer sur les DOM de la liste des nœuds et créer un tableau moi-même, mais est-il une plus belle façon de le faire?

Answer 1

Élément nodelists sont des objets hôte, à l'aide de l' Array.prototype.slice méthode sur des objets hôte n'est pas garanti, la Spécification ECMAScript états:

Si la tranche de la fonction peut être appliquée avec succès à un objet hôte est dépendant de l'implémentation.

Je vous recommande de faire une simple fonction pour effectuer une itération sur l' NodeList et ajouter chaque existant un élément dans un tableau:

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

Answer 2

Alors qu'il n'est pas vraiment une bonne cale, car il n'y a pas de spec nécessitant de travailler avec des éléments du DOM, j'ai fait une pour vous permettre d'utiliser slice() de cette manière: https://gist.github.com/brettz9/6093105

Mise à JOUR: Lorsque j'ai évoqué cette question avec le rédacteur en chef de la DOM4 spec (en se demandant si elles peuvent ajouter leurs propres restrictions d'accueillir des objets (de sorte que les spécifications obligerait les développeurs de convertir correctement ces objets lorsqu'il est utilisé avec les méthodes de tableau) au-delà de l'ECMAScript spec, qui a permis pour la mise en œuvre de l'indépendance), il a répondu que "l'Hôte objets sont plus ou moins obsolète par ES6 / IDL." Je vois par http://www.w3.org/TR/WebIDL/#es-array les specs, c'pouvez utiliser cette IDL pour définir "plate-forme de tableau d'objets", mais http://www.w3.org/TR/domcore/ ne semble pas être à l'aide de la nouvelle IDL pour HTMLCollection (mais il semble comme il pourrait le faire pour Element.attributes si elle n'indique explicitement qu'il est à l'aide de WebIDL pour DOMString et DOMTimeStamp). Je ne vois [ArrayClass] (qui hérite de la Matrice.prototype) est utilisé pour l' NodeList (et NamedNodeMap est maintenant dépréciée en faveur de l', le seul point qui serait encore à l'utiliser, Element.attributes). En tout cas, on dirait que c'est de devenir la norme. L'ES6 Array.from peut également être plus pratique pour ce genre de conversion que d'avoir à spécifier Array.prototype.slice et plus sémantiquement clair qu' [].slice() (et de la forme courte, Array.slice() (un "tableau générique"), a, autant que je sais, pas devenu un standard de comportement).

Answer 3

 var arr = new Array();
var x= ... get your nodes;

for (i=0;i<x.length;i++)
{
  if (x.item(i).nodeType==1)
  {
    arr.push(x.item(i));
  }
}
 

Cela devrait fonctionner, traversez le navigateur et obtenez tous les nœuds "d'élément".

Answer 4

En réponse à Guss:

 for (var i = 0, l = x.length; i < l; i++) { //...}