複数の要素を繰り返し処理
childNodesプロパティやquerySelectorAllメソッドで取得された複数の要素を繰り返し処理をするには、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などで取得した要素群（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());
});