querySelectorAll：操作节点

Question

据我了解，querySelector 返回一个真正的可更改元素，而 querySelectorAll 返回一个非活动静态节点集。

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

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

Answer 1

这也将起作用..

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

Answer 2

如querySelectorAll：操作节点中所述，但有一种使其工作的方法，因为< code>forEach 仅适用于数组，不适用于 NodeList：

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

Answer 3

问题是 querySelector 返回单个节点。 querySelectorAll 返回一组节点（活跃度意味着如果更新集合中的元素，它们不会被删除）。您需要为每个匹配的元素设置样式，可能使用循环 - 您不能只为所有元素设置一次属性。

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

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