HTML DOM ノード アクセス
DOMにより、HTML文書のすべてのノードにアクセスできます。
ノードへのアクセス
3つの方法でノードへアクセスできます:
- getElementById()メソッドを使用することによる
- getElementsByTagName()メソッドを使用することによる
- ノードリレーションを用いノードツリーをナビゲートすることによる
getElementById()メソッド
getElementById()メソッドは、指定したIDを持つ要素を返します:
構文
| node.getElementById("id"); |
次の例は、id="intro" を持つ要素を取得します:
注:getElementById()メソッドは、XMLでは動作しません。
getElementsByTagName()メソッド
getElementsByTagName()は、指定したタグ名を持つ全要素を返します。
構文
|
node.getElementsByTagName("tagname");
|
次の例は、文書内の全<p>のノードリストを返します:
次の例は、id="main"を持つ要素の子孫である、全 要素のノードリストを返します:
DOMノードリスト
getElementsByTagName()メソッドは、ノードリストを返します。ノードリストは、ノードの配列です。
以下のコードは、ノードリストの全<p>ノードを選択します:
例
|
x=document.getElementsByTagName("p");
|
ノードは、インデクス番号でアクセスできます。 2番目の<p>にアクセスするには、次のように書くことができます:
Try it yourself »
|
注:インデクスは 0 から始ります。
ノードリストに関しては、このチュートリアルの後の章で更に学習します。
DOMノードリストの長さ
lengthプロパティは、ノードリストのノード数を定義します。
lengthプロパティを使用することで、ノードリストを通るループができます:
例
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
|
Try it yourself »
|
例の説明:
- 全 <p> 要素ノードの取得
- 各 <p> 要素に対し、そのテキストノードの値を出力
ノードリレーションのナビゲート
3つのプロパティ;parentNode、firstChild、lastChildは、文書構造に従って、文書の short-distance travel を可能にします。
以下のHTMLを見てください:
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
|
上記HTMLコードにおいて、最初のp要素はbody要素の最初の子ノード(firstChild)であり、
div要素はbody要素の最後の子ノード(lastChild)です。
最初のp要素とdiv要素の親ノード(parentNode)は、body要素で、div要素内のp要素の親ノードはdiv要素です。
firstChildプロパティは、要素のテキストにアクセスするためにも使用できます:
例
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html> |
Try it yourself »
|
DOMルートノード
タグへのアクセスを可能にする2つの特別なdocumentプロパティがあります:
- document.documentElement - 文書のルートノードを返しします
- document.body - <body>タグへの直接アクセスが得られます
Try it yourself
|