QuerySelectorall: Manipulieren von Knoten

Question

Soweit ich verstanden habe, querySelector Gibt ein echtes veränderbares Element zurück querySelectorAll Gibt einen nicht lebenden statischen Knotensatz zurück.

Ich möchte den Stil aller Elemente an einen bestimmten Selektor anpassen. Es funktioniert gut für das erste Element mit querySelector, aber nicht für alle passenden Elemente mit querySelectorAll. Ich denke, das liegt daran, dass der Knotensatz nicht zulebewesen ist.

Gibt es eine Problemumgehung? Oder vermisst ich etwas?

Answer 1

Das Problem ist, dass querySelector Gibt einen einzelnen Knoten zurück. querySelectorAll Gibt eine Reihe von Knoten zurück (die Live-Ness bedeutet, dass die Elemente im Set nicht entfernt werden, wenn Sie sie aktualisieren). Sie müssen einen Stil auf jedem der übereinstimmenden Elemente festlegen, wahrscheinlich mit einer Schleife - Sie können nicht einfach eine Eigenschaft für alle einstellen.

Sie müssen also wahrscheinlich so etwas tun:

var nodes = document.querySelectorAll('div.foo');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].style.color = 'blue';
}

Answer 2

Dies wird auch funktionieren ..

[].forEach.call(document.querySelectorAll('div.foo'), function (el) {
    el.style.color = 'blue';
});

Answer 3

Wie in QuerySelectorall: Manipulieren von Knoten aber mit einem Weg, damit es funktioniert, seitdem forEach funktioniert nur auf Arrays, nicht auf Nodelisten:

Array.prototype.slice.call(document.querySelectorAll('div.foo')).forEach(function(el) {
    el.style.color = 'blue';
});