document.querySelectorAllの要素にforEachは使えない

document.querySelectorAllの要素にforEachは使えない

querySelectorAllにforEachは使えない

document.querySelectorAllはCSS セレクタにマッチする文書中の要素のすべてのリストを返す。

例えば下記のように記述すればclass=”foo”にテキストを挿入することができる。

var el = document.querySelectorAll('.foo');
for(var i=0; i<el.length; i++) {
  el[i].textContent = 'bar' + i;
}

forだと可読性が良くないためより簡単に記述するためforEachを使用しているコードをたまに見かける。

var el = document.querySelectorAll('.foo');
el.forEach(function(el, i) {
  el.textContent = 'bar' + i;
});

しかし、forEachを使用するとChrome以外のブラウザではエラーになり動作しない。
Microsoft EdgeでのじゃforEach実行結果

なぜならdocument.querySelectorAllで取得したものはオブジェクトでありforEachは配列の各要素に対して一度ずつ実行するためのメソッドだからだ。

よってChromeでエラーが出ないのは本来の仕様とは異なる。

var el = document.querySelectorAll('.foo');
console.info(typeof el); // =>; object
el.forEach(function(el, i) {
  el.textContent = 'bar' + i;
});

しかしObject.keysとforEachを使用すれば処理できるので下記のように記述すればすべてのブラウザでエラーは発生しない。

// before
// <div class="hoge"></div>
// <div class="hoge"></div>
// <div class="hoge"></div>
var el2 = document.querySelectorAll('.hoge');
Object.keys(el2).forEach(function(i) {
  el2[i].textContent = 'fuga' + i;
});
// after
// <div class="hoge">fuga0</div>
// <div class="hoge">fuga1</div>
// <div class="hoge">fuga2</div>

document.querySelectorAllにforEachを使用したサンプル