html内の同じような構成のDOM要素を取得(同じclass,id,属性などが割り振られている場合など)して、関数などを処理する方法をご紹介します。
標準的なWebAPIメソッドのquerySelectorALLで取得する方法。
const el = document.querySelectorAll('[data-value]');
for ( let i = 0;i < el.length; i++){
//data-value属性が付与されている要素の個数分回す処理
//処理の中身
}forEachで回す場合は、配列をループさせる場合に使用されるため、querySelectorALLで取得できるNodeListは変換なしには処理できません。
querySelectorAllで取得したデータ(NodeList)を配列に置換する
const el = document.querySelectorAll('[data-value]');
//el(Nodelist)を配列に置換する
function toArray(el){
return Array.from(el, 0);
}sliceを読んでArrayに変換しています。NodeListやHTMLCollectionを配列(Array)に変換する方法には以下のようなものがあります。Array.prototype.sliceメソッドと、Array.applyメソッドとArray.fromメソッドです。どの手法でも配列変換できると思います。
const array1 = Array.prototype.slice.call(document.querySelector('.test'));
または、
const array2 = Array.apply(null, document.querySelector('.test'));
または、
const array3 = Array.from(document.querySelector('.test'));
でもOKここまでくれば先ほど定義した配列に対してforEachメソッドを使用してループを回す処理ができるようになります。
//先ほど定義したtoArray関数を使用する
toArray(el).forEach((el)=>{
//ここに実行したい処理
console.log(el.id);
}
Witten by Masa
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。