querySelectorAll：节点操作

Question

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

我想调整所有符合特定选择器的元素的样式。对于第一个使用querySelector的元素，它可以正常工作，但是对于所有匹配的元素使用querySelectorAll时就不行了。我猜这是因为节点集是非动态的。

有什么解决方法吗？或者我漏掉了什么？

- fabb

Answer 1

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

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

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

- lonesomeday

---

非常感谢！我尝试过，但它不起作用，所以我认为这是因为节点集不是实时的。但实际上我只是忘记初始化迭代器（= 0）... - fabb

Answer 2

这也可以工作..

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

- shunryu111

---

有趣的是，上面的代码可以正常工作，但是 document.querySelectorAll('div.foo').forEach(function (e1) ... 却不能正常工作。你有什么想法吗？ - Rene Wooller

querySelectorAll 返回的是一个 NodeList，它没有 forEach 方法。请参见：https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList#为什么_nodelist_不是_array？ - seans

Answer 3

如querySelectorAll: 操作节点所述，但需要一种方法使其正常工作，因为 forEach 仅适用于数组，而不适用于节点列表：

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

- Sebastiaan Franken