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';
});