Wie konvertiere ich eine DOM-Knotenliste in ein Array in Javascript?

Ich habe eine Javascript-Funktion, die eine Liste von HTML-Knoten akzeptiert, aber ein Javascript-Array erwartet (es werden einige Array-Methoden ausgeführt), und ich möchte ihr die Ausgabe zuführen, die Document.getElementsByTagNameeine DOM-Knotenliste zurückgibt.

Anfangs dachte ich daran, etwas Einfaches zu verwenden wie:

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

Und das funktioniert in allen Browsern einwandfrei, außer natürlich Internet Explorer, der den Fehler "JScript-Objekt erwartet" zurückgibt, da die von Document.getElement*Methoden zurückgegebene DOM-Knotenliste anscheinend kein JScript-Objekt ist, das ausreicht, um das Ziel eines Funktionsaufrufs zu sein.

Vorsichtsmaßnahmen: Es macht mir nichts aus, Internet Explorer-spezifischen Code zu schreiben, aber ich darf keine Javascript-Bibliotheken wie JQuery verwenden, da ich ein Widget schreibe, das in die Website eines Drittanbieters eingebettet werden soll, und ich kann keine externen Bibliotheken laden schafft Konflikte für die Kunden.

Meine letzte Anstrengung besteht darin, die DOM-Knotenliste zu durchlaufen und selbst ein Array zu erstellen. Aber gibt es eine bessere Möglichkeit, dies zu tun?

Nodelisten sind Host - Objekte , die unter Verwendung Array.prototype.slicewird Verfahren auf Host - Objekten nicht garantiert werden , stellt die ECMAScript - Spezifikation:

Ob die Slice-Funktion erfolgreich auf ein Host-Objekt angewendet werden kann, hängt von der Implementierung ab.

Ich würde Ihnen empfehlen, eine einfache Funktion zu erstellen, um das zu durchlaufen NodeListund jedes vorhandene Element einem Array hinzuzufügen:

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;
}

AKTUALISIEREN:

Wie andere Antworten vermuten lassen, können Sie jetzt in modernen Umgebungen die Spread-Syntax oder die Array.fromMethode verwenden:

const array = [ ...nodeList ] // or Array.from(nodeList)

Aber wenn ich darüber nachdenke, denke ich, dass der häufigste Anwendungsfall zum Konvertieren einer NodeList in ein Array darin besteht, darüber zu iterieren, und jetzt hat das NodeList.prototypeObjekt die forEachMethode nativ . Wenn Sie sich also in einer modernen Umgebung befinden, können Sie sie direkt verwenden oder haben eine Pollyfill.

In es6 können Sie einfach Folgendes verwenden:

• Spread-Operator

   var elements = [... nodelist]

• Verwenden von Array.from

   var elements = Array.from(nodelist)

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Mit Spread (ES2015) ist es so einfach wie:[...document.querySelectorAll('p')]

(Optional: Verwenden Sie Babel, um den obigen ES6-Code in die ES5-Syntax zu transpilieren.)

Probieren Sie es in der Konsole Ihres Browsers aus und sehen Sie die Magie:

for( links of [...document.links] )
  console.log(links);

Verwenden Sie diesen einfachen Trick

<Your array> = [].map.call(<Your dom array>, function(el) {
    return el;
})

Obwohl es sich nicht wirklich um eine richtige Unterlegscheibe handelt, da es keine Spezifikation gibt, die das Arbeiten mit DOM-Elementen erfordert, habe ich eine erstellt, die Sie auf slice()diese Weise verwenden können: https://gist.github.com/brettz9/6093105

UPDATE : Als ich dies mit dem Editor der DOM4-Spezifikation angesprochen habe (mit der Frage, ob sie Host-Objekten ihre eigenen Einschränkungen hinzufügen könnten (damit die Spezifikation erfordert, dass Implementierer diese Objekte ordnungsgemäß konvertieren, wenn sie mit Array-Methoden verwendet werden), die über die ECMAScript-Spezifikation hinausgehen Er antwortete, dass "Host-Objekte gemäß ES6 / IDL mehr oder weniger veraltet sind". Ich sehe per http://www.w3.org/TR/WebIDL/#es-array, dass Spezifikationen diese IDL verwenden können, um "Plattform-Array-Objekte" zu definieren, aber http://www.w3.org/TR/domcore/ nicht Es scheint, dass die neue IDL nicht für verwendet wird HTMLCollection(obwohl es so aussieht, als ob dies der Fall wäre, Element.attributesobwohl nur explizit angegeben wird, dass WebIDL für DOMString und DOMTimeStamp verwendet wird). Ich verstehe[ArrayClass](das von Array.prototype erbt) wird für verwendet NodeList(und NamedNodeMapist jetzt zugunsten des einzigen Elements, das es noch verwenden würde, veraltet Element.attributes). In jedem Fall sieht es so aus, als ob es Standard werden soll. Der ES6 ist Array.frommöglicherweise auch für solche Konvertierungen praktischer als die Angabe Array.prototype.sliceund semantisch klarer als [].slice()(und die kürzere Form Array.slice()(ein "Array-Generikum") ist meines Wissens nicht zum Standardverhalten geworden).

Heute, im Jahr 2018, könnten wir ECMAScript 2015 (6. Ausgabe) oder ES6 verwenden, aber nicht alle Browser können es verstehen (z. B. versteht IE nicht alles). Wenn Sie möchten, können Sie ES6 wie folgt verwenden: var array = [... NodeList];( als Spread-Operator ) oder var array = Array.from(NodeList);.

In einem anderen Fall (wenn Sie ES6 nicht verwenden können) können Sie den kürzesten Weg verwenden, um a NodeListin ein zu konvertieren Array:

var array = [].slice.call(NodeList, 0);.

Beispielsweise:

var nodeList = document.querySelectorAll('input');
//we use "{}.toString.call(Object).slice(8, -1)" to find the class name of object
console.log({}.toString.call(nodeList).slice(8, -1)); //NodeList

var array = [].slice.call(nodeList, 0);
console.log({}.toString.call(array).slice(8, -1)); //Array

var result = array.filter(function(item){return item.value.length > 5});

for(var i in result)
  console.log(result[i].value); //credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Aber wenn Sie die iterieren DOMnur leicht Knotenliste, dann brauchen Sie nicht ein konvertieren , NodeListum eine Array. Es ist möglich, die Elemente in einer NodeListVerwendung zu durchlaufen:

var nodeList = document.querySelectorAll('input');
// Calling nodeList.item(i) isn't necessary in JavaScript
for(var i = 0; i < nodeList.length; i++)
    console.log(nodeList[i].value); //trust, credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Versuchen Sie nicht, die Elemente in der Liste zu verwenden for...inoder for each...inaufzulisten, da dies auch die Länge und die Elementeigenschaften von auflistet NodeListund Fehler verursacht, wenn Ihr Skript davon ausgeht, dass es sich nur um Elementobjekte handelt. Es for..inist auch nicht garantiert, die Immobilien in einer bestimmten Reihenfolge zu besuchen. for...ofSchleifen durchlaufen NodeList-Objekte korrekt.

Auch sehen:

• NodeList-Dokumentation

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));
  }
}

Dies sollte funktionieren, browserübergreifend sein und Ihnen alle "Element" -Knoten bringen.