複数の要素を繰り返し処理

childNodesプロパティなどによって取得された複数の要素を繰り返し処理をするには、NodeList.forEachメソッドを使用します。

  • ※ IEは全てのバージョンで対応していません。

構文

elements.forEach(callback, thisArg);

引数

第一引数
必須
callback Function 繰り返し処理するコールバック関数
第二引数 thisArg Any コールバック関数内で使用するthisキーワードに割り当てるオブジェクト

コールバック関数で得られる引数

コールバック関数の引数は次の内容が得られます。

callback(elem, index, listObj) { ... }
第一引数 elem Element 繰り返されている現在の要素
第二引数 index number
第三引数 listObj NodeList 繰り返されている対象のNodeList

サンプルコード

JavaScript

var childNodes = document.getElementById('sample').childNodes;

childNodes.forEach(function(elem) {
	alert(elem.tagName.toLowerCase());
});

HTMLCollectionへの対応、IEへの対応

forEachメソッドはchildrenプロパティやgetElementsByTagName、querySelectorAllなどで取得した要素群(HTMLCollection)には対応していません。
この要素群(HTMLCollection)やIEに対応させるには、次のようにすることで繰り返すことができます。

JavaScript

var childElems = document.getElementById('sample').children;

Array.prototype.forEach.call(childElems, function(elem) {
	alert(elem.tagName.toLowerCase());
});

また、次のように配列に変換することでも対応できます。

JavaScript

var childElems = [].slice.call(document.getElementById('sample').children);

childElems.forEach(function(elem) {
	alert(elem.tagName.toLowerCase());
});

JavaScript逆引きリファレンス一覧へ戻る