HTML DOM ナビゲーション
HTML DOM を使用すると、ノードの関係を使用してノード ツリー内を移動できます。
HTML DOM ノード リスト
getElementsByTagName() メソッドは、ノード リストを返します。ノード リストはノードの配列です。
次のコードは、ドキュメント内のすべての <p> ノードを選択します:
インスタンス
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<script>
x=document.getElementsByTagName("p");
document.write("The innerHTML of the second paragraph is: " + x[1].innerHTML);
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
注:
次のラベルは 0 から始まります。
HTML DOM ノード リストの長さ
length 属性は、ノード リスト内のノードの数を定義します。
長さ属性を使用してノード リストをループできます:
インスタンス
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>
<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンライン インスタンスを表示します
インスタンス分析:
すべての p> 要素ノードを取得
各 <p> 要素のテキスト ノードの値を出力
3 つのノード属性を使用できます:parentNode、firstChild、lastChild文書構造ナビゲーション内。
以下の HTML スニペットをご覧ください:
<html><body>
<p>Hello World!</p>
<div>
<p>DOM は非常に便利です!</p>
<p>この例はノードの関係を示しています。</p>
</div>
</body>
</html>
<p>Hello World!</p>
<div>
<p>DOM は非常に便利です!</p>
<p>この例はノードの関係を示しています。</p>
</div>
</body>
</html>
- 最初の <p>要素は <body> ; 要素の最初の子要素 (firstChild) は、<body> 要素の最後の子要素 (lastChild) です。 <div> 要素の親ノード (parentNode)
- firstChild 属性を使用して、要素のテキストにアクセスできます:
- Instance
<html><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html> インスタンスの実行»
[インスタンスの実行] ボタンをクリックして表示します。オンライン インスタンス
document.body - ドキュメントの本文
- インスタンス
<html><!DOCTYPE html> <html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.body</b> property.</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
childNodes と nodeValue
innerHTML プロパティに加えて、childNodes プロパティとnodeValue プロパティを使用して要素のコンテンツを取得することもできます。
次のコードは、id="intro" を持つ <p> 要素の値を取得します:
インスタンス
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします。上記の
