zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript querySelectorAllで取得したデータをforEachでループする

JavaScriptquerySelectorAllで取得したデータをforEachでループする方法を紹介します。

querySelectorAllは配列ではなくNodeListで取得されます。

そのため、for文は可能ですが、forEachはできません。

var elems = document.querySelectorAll('[data-val]');

// OK
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i].id);
}

// NG
elems.forEach(function(elem) {
  console.log(elem.id);
});

NodeListを配列に変換する

forEachを使用するために、NodeList配列に変換します。

少しトリッキーですが、以下のファンクションで変換できます。

// NodeListを配列に変換する
function toArray(nodeList) {
  return Array.prototype.slice.call(nodeList, 0);
}

// OK
var elems = document.querySelectorAll('[data-val]');
toArray(elems).forEach(function(elem) {
  console.log(elem.id);
});

関連記事