HTML DOM ナビゲーション
HTML DOM を使用すると、ノードの関係を使用してノードツリー内をナビゲーションできます。
HTML DOM ノードリスト
getElementsByTagName() メソッドは返しますノードリスト。ノードリストはノードの配列です。
次のコードは、ドキュメント内のすべての <p> ノードを選択します。
例
var x=document.getElementsByTagName("p");
これらのノードにはインデックス番号でアクセスできます。2 番目の <p> にアクセスするには、次のように記述します。
y=x[1];
試してみる »
注意：
インデックス番号は 0 から始まります。
HTML DOM ノードリストの長さ
length プロパティは、ノードリスト内のノードの数を定義します。
length プロパティを使用してノードリストをループできます：
例
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");
}
試してみる »
例の解析：
- すべての <p> 要素ノードを取得する
- 各 <p> 要素のテキストノードの値を出力する
ノード関係のナビゲーション
3 つのノードプロパティ：parentNode、firstChild、lastChild を使用して、ドキュメント構造内をナビゲーションできます。
次の HTML スニペットを見てください。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Hello World!</p>
<div>
<p>DOM は非常に便利です!</p>
<p>この例は、ノードの関係を示しています。</p>
</div>
</body>
</html>
- 最初の <p> 要素は <body> 要素の最初の子要素（firstChild）です。
- <div> 要素は <body> 要素の最後の子要素（lastChild）です。
- <body> 要素は、最初の <p> 要素と <div> 要素の親ノード（parentNode）です。
firstChild プロパティを使用して要素のテキストにアクセスできます：
例
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
試してみる »
DOM ルートノード
ここには、ドキュメント全体にアクセスできる 2 つの特別なプロパティがあります。
- document.documentElement - ドキュメント全体
- document.body - ドキュメントの本文
例
<p>Hello World!</p>
<div>
<p>DOM は非常に便利です!</p>
<p>この例が示しているのは、<b>document.body</b>プロパティです。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
試してみる »
childNodes と nodeValue
innerHTML プロパティの他に、childNodes と nodeValue プロパティを使用して要素のコンテンツを取得することもできます。
次のコードは、id="intro" の <p> 要素の値を取得します。
例
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
試してみる »
上記の例では、getElementById はメソッドであり、childNodes と nodeValue はプロパティです。
このチュートリアルでは、innerHTML プロパティを使用します。ただし、上記の方法を学ぶことは、DOM ツリー構造とナビゲーションの理解に役立ちます。
その他の拡張機能