javascript - querySelectorAll：操作节点

Question

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

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

有解决方法吗？还是我错过了什么？

score 9 · Accepted Answer

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

因此，您可能需要执行以下操作：

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

score 5 · Accepted Answer

这也将工作..

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

score 1 · Accepted Answer

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

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

3 回答 3