javascript - querySelectorAll：ノードの操作

Question

私が理解している限りでquerySelectorは、実際の変更可能な要素をquerySelectorAll返し、非ライブの静的ノードセットを返します。

特定のセレクターに合うすべての要素のスタイルを調整したい。。を含む最初の要素に対しては正常に機能しますが、。querySelectorを含むすべての一致する要素に対しては機能しませんquerySelectorAll。これは、ノードセットが非ライブであるためだと思います。

回避策はありますか？それとも私は何かが足りないのですか？

Answer 1

問題はquerySelector、単一のノードを返すことです。querySelectorAllノードのセットを返します (ライブネスとは、セット内の要素を更新しても削除されないことを意味します)。おそらくループを使用して、一致する各要素にスタイルを設定する必要があります。すべての要素に対して一度だけプロパティを設定することはできません。

したがって、おそらく次のようなことをする必要があります。

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

Answer 3

querySelectorAllで説明されているように: ノードを操作しますが、それを機能させる方法があります。これforEachは、NodeList ではなく配列でのみ機能するためです。

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