IE で NodeList をループ処理する

毎回調べてるのでメモ。IE では NodeList に forEach メソッドが実装されていないため、querySelectorAll() の返値を forEach で走査できません。IE をサポートする必要がある Web サイトなどを構築するときに NodeList のループ処理を行うときには、ループ可能なオブジェクトに変換してあげる必要があります。

Array.prototype.forEach　を使う方法

MDN に書いてある方法。 NodeList をループ以外にも使う場合はこの方法でループするといいかも。

const list = document.querySelectorAll('div.some-class');
[].forEach.call(list, item => { });

配列に変換しておく

ループするだけなら最初から配列に変換してもよさそう。

const list = [].slice.call(document.querySelectorAll('div.some-class'));
list.forEach(item => { });

あとがき

[] のおかげでタイプが減ってなかなかいいなと。 そして IE 案件が世界から無くなりますように。