JavaScript HTML DOM ナビゲーション
- 前のページ DOM イベントリスナー
- 次のページ DOM ノード
HTML DOMを通じて、ノードツリーをナビゲートするためにノード関係を使用できます
DOM ノード
W3C HTML DOM標準に基づいて、HTMLドキュメント内のすべてのものはノードとされています：
- 全体のドキュメントはドキュメントノード
- 各HTML要素は要素ノード
- HTML要素内のテキストはテキストノード
- 各HTML属性は属性ノード
- すべてのコメントはコメントノード
HTML DOMをもちまして、ノードツリーのすべてのノードはJavaScriptでアクセスできます
新しいノードを作成し、すべてのノードを編集および削除することができます
ノード関係
ノードツリーのノードは互いに関了一定的階層関係があります
- 用語（親、子、同胞、parent、childおよびsibling）はこれらの関係を説明するために使用されます
- ノードツリーでは、最上位のノードがルート（ルートノード）と呼ばれます
- 各ノードは親ノードを持っていますが、ルート（ルートノードは親を持っていません）を除きます
- ノードは一定の数の子を持つことができます
- 同胞（兄弟または姉妹）とは同じ親を持つノードのこと
<html>
<head>
<title>DOM ガイド</title>
</head>
<body>
<h1>DOM 初級講座</h1>
<p>Hello world!</p>
</body>
</html>
以上の HTML から以下の情報を読み取ることができます：
- <html> はルートノード
- <html> は親を持っていない
- <html> は <head> と <body> の親
- <head> は <html> の最初の子
- <body>は<html>の最後の子です
同時に：
- <head>には子が一つあります：<title>
- <title>には子が一つあります（テキストノード）：「DOM 教程」
- <body>には二つの子があります：<h1>と<p>
- <h1>には子が一つあります：「DOM 第一課」
- <p>には子が一つあります：「Hello world!」
- <h1>と<p>は同胞です
ノード間のナビゲーション
JavaScriptを使用して、以下のノード属性を通じてノード間をナビゲートできます：
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
子ノードとノード値
DOM処理でよくある間違いは、要素ノードにテキストが含まれていると考えるところです。
例：
<title id="demo">DOM 教程</title>
（上記の例の）要素ノード <title> 含まれていませんテキストを含んでいます。
それは「DOM 教程」という値を持つテキストノードを通じて取得できます。
テキストノードの値は、ノードの innerHTML 属性を使用してアクセスします：
var myTitle = document.getElementById("demo").innerHTML;
innerHTML 属性にアクセスすることは、最初の子ノードにアクセスすることに等しいです： nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
また、以下のように最初の子ノードにアクセスできます：
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
以下の三つの例で取得します <h1> 要素のテキストをコピーして <p> 要素内：
例 1
<html>
<body>
<h1 id="id01">私の最初のページ</h1>
<p id="id02">こんにちは！</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
例 2
<html>
<body>
<h1 id="id01">私の最初のページ</h1>
<p id="id02">こんにちは！</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
例 3
<html>
<body>
<h1 id="id01">私の最初のページ</h1>
<p id="id02">こんにちは！</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
このチュートリアルでは、以下を使用します： innerHTML HTML 要素の内容を取得します。
ただし、上記の他の方法を学ぶことで、DOM の木構造とナビゲーションを理解するのに役立ちます。
DOM のルートノード
完全なドキュメントにアクセスするために、2つの特別な属性があります：
- document.body - ドキュメントの body
- document.documentElement - 完全なドキュメント
例
<html> <body> <p>Hello World!</p> <div> <p>DOM は非常に便利です！</p> <p><b>document.body</b> 属性のデモンストレーションです。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
例
<html> <body> <p>Hello World!</p> <div> <p>DOM は非常に便利です！</p> <p><b>document.documentElement</b> 属性のデモンストレーションです。</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
nodeName 属性
nodeName 属性はノードの名前を定義します。
- nodeName は読み取り専用です
- 要素ノードの nodeName はタグ名と同じです
- 属性ノードの nodeName は属性名です
- テキストノードの nodeName は常に #text です
- ドキュメントノードの nodeName は常に #document です
例
<h1 id="id01">私の最初のウェブページ</h1>
<p id="id02">こんにちは！</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
注：nodeName は常に HTML 要素の大文字のタグ名を含みます。
nodeValue 属性
nodeValue 属性はノードの値を定義します。
- 要素ノードの nodeValue は undefined です
- テキストノードの nodeValue はテキストです
- 属性ノードの nodeValue は属性値です
nodeType 属性
nodeType 属性はノードのタイプを返します。nodeType 読み取り専用です。
例
<h1 id="id01">私の最初のウェブページ</h1>
<p id="id02">こんにちは！</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
もっとも重要な nodeType 属性は：
| ノード | タイプ | 例 |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" （廃止） |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- これはコメント --> |
| DOCUMENT_NODE | 9 | HTML ドキュメント自体（<html>の親） |
| DOCUMENT_TYPE_NODE | 10 | <!DOCTYPE html> |
Type 2 は HTML DOM で廃止されました。XML DOM では廃止されていません。
- 前のページ DOM イベントリスナー
- 次のページ DOM ノード
