querySelectorAll：操纵节点

Question

据我所知，querySelector返回一个真正的可更改元素，而querySelectorAll返回一个非实时静态节点集。

我想调整适合特定选择器的所有元素的样式。它适用于querySelector的第一个元素，但不适用于querySelectorAll的所有匹配元素。我想这是因为节点集是非实时的。

有解决方法吗？或者我错过了什么？

Answer 1

问题是querySelector返回单个节点。 querySelectorAll返回一组节点（live-ness意味着如果更新它们，则不会删除集合中的元素）。你需要在匹配的每个元素上设置一个样式，可能是一个循环 - 你不能只为它们设置一次属性。

所以，你可能需要这样做：

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

Answer 2

这也有效..

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

Answer 3

如querySelectorAll: manipulating nodes中所述，但有一种方法可以使其工作，因为forEach仅适用于数组，而不适用于NodeLists：

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