JavaScript入門 | ドキュメントオブジェクトモデル | ノードリスト

Tags:

ノードリスト

ノードリストは、getElementsByTagName()メソッドやchildNodesプロパティの値として返されるオブジェクトである。このオブジェクトは、HTML文書と同じ順序で、文書内のすべてのノードをリスト形式で保存している。

リスト内の各ノードには、0から始まるインデックスを使ってアクセスできる。

// idが"list"である要素のすべての子ノードを選択する。
var listItems = document.getElementById("list").childNodes;
// 子ノードのうち最初のli要素の内容を変更する。
listItems[1].firstChild.nodeValue = "HTML要素の内容を変更しました!";

上の例では、子ノードのうち最初の<li>要素を選択するとき、インデックスとして0ではなく1を使用している。その理由は、HTML DOMでは各要素ノードの後に別のテキストノードが存在するためである。したがって、idが"list"である要素の子ノードリストの最初のノードには、その要素の後に存在するテキストノードが保存される。

次の例は、このような要素ノードの間に存在するテキストノードを確認する例である。

// idが"list"である要素のすべての子ノードを選択する。
var listItems = document.getElementById("list").childNodes;
 
// 子ノードのうち最初のノードの値を出力する。
document.write(listItems[0].nodeValue + "<br>");
// 子ノードのうち2番目のノードの、最初の子ノードの値を出力する。
document.write(listItems[1].firstChild.nodeValue + "<br>");
// 子ノードのうち3番目のノードの値を出力する。
document.write(listItems[2].nodeValue);

上の例は、各要素ノードの後に別のテキストノードが存在することを示している。したがって、ノードリストにインデックスでアクセスするときは、このようなテキストノードの存在を必ず意識する必要がある。

ノードリストオブジェクトは、リストにノードが追加されたり削除されたりすると、自分自身の状態情報を更新する。したがって、このオブジェクトのlengthプロパティの値は、常にノードリストが保持しているノードの総数を表す。

var listItems = document.getElementsByTagName("li");              // すべての<li>要素を選択する。
document.getElementById("text").innerHTML = 
"このノードリストの長さは" + listItems.length + "個です。<br>"; // すべての子ノードの数を返す。
function changeTextColor() {
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].style.color = "orange";                      // すべての子ノードの文字色を変更する。
    }
}