Javascript - Verkettung mehrerer NodeLists zusammen

Question

Ich fragte ursprünglich nach einer eleganten Möglichkeit, die Array.concat() Funktionalität auf die Ergebnisse der getElementsByTagName Funktion in IE oder älteren Browsern zu simulieren, weil es schien, dass concat nicht unterstützt wurde. Nur natürlich - der Grund, warum das zurückgegebene Objekt dies nicht unterstützt, ist, dass es kein Array ist. Hoppla!

getElementsByTagName gibt tatsächlich eine NodeList zurück. Die wirkliche Frage ist also: Was ist eine gute Möglichkeit, um eine einzige Liste aller Formularelemente in einem Dokument (Eingabe, Auswahl, Textbereich, Schaltfläche) zu erhalten, um sie durchzulaufen? Ein Array ist nicht erforderlich ... eine einzige NodeList wäre auch perfekt.

Beachten Sie, dass ich IE6 verwende, wie dies für ein Firmenintranet (bald IE8 obwohl) ist.

Die Antwort, die ich kam mit war:

• es einfacher geworden ist und ausgeführt wahrscheinlich besser, nur den Code in eine separate Funktion gesetzt und dreimal mit den verschiedenen Nodelisten zu nennen, anstatt zu befürchten ein guter Weg, sie zu einem zusammenzuflicken.

• Ich wechselte schließlich zu MooTools (nach mehreren Stunden Lesen von Vergleichen aller verschiedenen Frameworks). Jetzt ist es sehr einfach, ein Array mit den gewünschten Elementen zu erhalten. Ich empfehle, ein JavaScript-Framework wie dieses zu verwenden, anstatt Leute, die ihre Gehirne heraus prügeln, die versuchen, den besten Weg zu finden, Sachen zu tun. Natürlich bin ich nur dafür, die rohe Sprache zu lernen (weshalb ich mich so lange auf ein Framework beschränkt habe), aber es ist nicht immer der schnellste Weg, Dinge in Gang zu bringen, was in einem Unternehmen oft so wichtig ist als Verbesserung der Fähigkeiten des Coders mit der Sprache.

Update: fast 2 Jahre später würde ich nur jQuery verwenden und damit fertig sein!

Answer 1

Um Nodelists zu verketten, konvertieren Sie sie in Arrays mit Array.prototype.slice.call und dann concat normal.

var a = Array.prototype.slice.call(document.getElementsByTagName("p")), 
    b = Array.prototype.slice.call(document.getElementsByTagName("div")) 

var c = a.concat(b); 

Edit: (Als Reaktion auf Ihren Kommentar)

Wenn Sie nur ein paar Typen von Elementen haben, ist dies in Ordnung, aber die Leistung nimmt mit der Anzahl der DOM Anrufe, die Sie machen. Es kann besser und schneller sein, eine document.getElementsByTagName('*') zu tun, Schleife durch die Liste und wählen Sie die Elemente mit den erforderlichen nodeName.

Eine andere Sache zu beachten ist, dass die oben verwendete Array.prototype.slice Methode möglicherweise nicht in allen Browsern funktioniert. Überprüfen Sie die Kommentar-Startlinie # 723 in sizzle.js (die Selektor-Engine hinter jQuery)

Natürlich ist es am besten, eine Bibliothek wie jQuery verwenden, die alle Kopfschmerzen behandelt.Sie können einfach tun:

$("input, select, textarea, <other tags>") 

Answer 2

var a1=document.getElementsByTagName('div'), 
a2=document.getElementsByTagName('button'); 
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length)) 

Answer 3

function mergeNodeLists(a, b) { 
    var slice = Array.prototype.slice; 
    return slice.call(a).concat(slice.call(b)); 
} 

console.log(mergeNodeLists(inputs, selects)); // => [input, select]

Answer 4

ich gedacht hatte es hätte mehr Antworten gewesen, als dies ohnehin gab ich diesen einen Schuss und kam mit der folgenden Funktion nach oben obwohl ich mir ein bisschen den Kopf schütteln musste.

function group_elements(element, tags) { 
    var elements = element.getElementsByTagName('*'); 
    var results = []; 
    for (var i = 0; i < elements.length; ++i) { 
     if (tags.indexOf(elements[i].nodeName.toLowerCase()) > -1) { 
     results.push(elements[i]); 
     } 
    } 
    return results; 
} 


var form = document.getElementById('form'); 
var tags = ['input', 'select']; 
console.log(group_elements(form, tags)); 

Answer 5

Mit dem ES6 spread operator können Sie

let arr = [...nodeList1, ...nodeList2]; 

Answer 6

tun Wie in der MDN Documentation erwähnt, können Sie auch Array.from verwenden, um eine NodeList in einem Array auf Browsern zu konvertieren, die sie unterstützen.