HTML DOMを使用することで、ノードのリレーションシップを使用してノードツリーをナビゲートすることができます。
W3C HTML DOM標準によると、HTML文書のすべてはノードです：
HTML DOMを使用すると、JavaScriptによりノードツリー内のすべてのノードにアクセスができます。
新しいノードを作成し、すべてのノードを変更または削除をすることができます。
ノードツリー内のノードは、互いに階層関係にあります。
親、子、兄弟という用語は、関係を説明するために使われます。
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
上のHTMLから、次のことを読み取ることができます：
および：
JavaScriptで使用してノード間を移動するために、次のノードプロパティが使用できます：
DOM 処理における一般的なエラーは、要素ノードにテキストが含まれていると考えていることです。
<title
id="demo">DOM Tutorial</title>
要素ノード（上の例では<title>）に、テキストは含まれません。
それは、値 "DOM Tutorial" を持つテキストノードに含まれます。
テキストノードの値は、ノードの innerHTML プロパティでアクセスできます：
var myTitle =
document.getElementById("demo").innerHTML;
innerHTMLプロパティへのアクセスは、最初の子のnodeValueへのアクセスと同じです：
var myTitle =
document.getElementById("demo").firstChild.nodeValue;
最初の子へのアクセスは、次のように行うこともできます：
var myTitle =
document.getElementById("demo").childNodes[0].nodeValue;
次の3つの例は、<h1>要素のテキストを取得し、<p>要素にコピーします：
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Try it Yourself »
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Try it Yourself »
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
Try it Yourself »
このチュートリアルでは、innerHTMLプロパティを使用してHTML要素のコンテンツを取得します。
しかし、上記以外の方法を学ぶことは、ツリー構造とDOMのナビゲーションを理解するのに便利です。
全てのドキュメントにアクセスができるようにする2つの特別なプロパティがあります：
<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>
Try it Yourself »
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>
Try it Yourself »
nodeName ロパティーは、ノードの名前を指定します。
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Try it Yourself »
注: nodeNameに含まれるHTML要素は、常に大文字のタグ名でます。
nodeValue プロパティは、ノードの値を指定します。
nodeType プロパティはノードの型を返します。 nodeTypeは読み取り専用です。
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Try it Yourself »
最も重要なノードタイプは次のとおりです：
| 要素タイプ | ノードタイプ |
|---|---|
| 要素 | 1 |
| 属性 | 2 |
| テキスト | 3 |
| コメント | 8 |
| ドキュメント | 9 |