querySelectorAll：操作节点答案

【问题标题】：querySelectorAll: manipulating nodesquerySelectorAll：操作节点
【发布时间】：2011-09-12 16:21:09
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这也可以..

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

【讨论】：

我很感兴趣的是上面的方法，但是document.querySelectorAll('div.foo').forEach(function (e1) ... 不起作用。任何想法为什么？
querySelectorAll 返回一个没有 forEach 的 NodeList。见：developer.mozilla.org/en-US/docs/Web/API/…

【解决方案3】：

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

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

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

【讨论】：