JavaScript querySelectorAllで取得したデータをforEachでループする
JavaScriptのquerySelectorAllで取得したデータを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);
});