JavaScript HTMLDOMナビゲーション
HTML DOMを使用すると、ノードの関係を使用してノードツリーをナビゲートできます。
DOMノード
W3C HTML DOM標準によれば、HTMLドキュメント内のすべてがノードです。
- ドキュメント全体がドキュメントノードです
- すべてのHTML要素は要素ノードです
- HTML要素内のテキストはテキストノードです
- すべてのHTML属性は属性ノードです(非推奨)
- すべてのコメントはコメントノードです
HTML DOMを使用すると、ノードツリー内のすべてのノードにJavaScriptでアクセスできます。
新しいノードを作成したり、すべてのノードを変更または削除したりできます。
ノードの関係
ノードツリー内のノードは、相互に階層関係にあります。
親、子、および兄弟という用語は、関係を説明するために使用されます。
- ノードツリーでは、最上位ノードはルート(またはルートノード)と呼ばれます
- ルート(親がない)を除いて、すべてのノードには正確に1つの親があります
- ノードには多数の子を含めることができます
- 兄弟(兄弟または姉妹)は、同じ親を持つノードです
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
上記のHTMLから、次のように読むことができます。
<html>
ルートノードです<html>
親がいない<html>
<head>
との親です<body>
<head>
の最初の子です<html>
<body>
の最後の子です<html>
と:
<head>
子供が1人います:<title>
<title>
1つの子(テキストノード)があります:「DOMチュートリアル」<body>
2人の子供がいます:<h1>
そして<p>
<h1>
子供が1人います:「DOMレッスン1」<p>
子供が1人います:「Helloworld!」<h1>
と<p>
兄弟です
ノード間のナビゲート
次のノードプロパティを使用して、JavaScriptでノード間を移動できます。
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
子ノードとノード値
DOM処理でよくあるエラーは、要素ノードにテキストが含まれていることを期待することです。
例:
<title
id="demo">DOM Tutorial</title>
要素ノード
<title>
(上記の例)にはテキストが含まれていません。
これには、値が「DOMチュートリアル」のテキストノードが含まれています。
innerHTML
テキストノードの値には、ノードのプロパティ
からアクセスでき
ます。
myTitle = document.getElementById("demo").innerHTML;
innerHTMLプロパティへのアクセスはnodeValue
、最初の子のへのアクセスと同じです。
myTitle = document.getElementById("demo").firstChild.nodeValue;
最初の子へのアクセスも次のように実行できます。
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>
例
<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>
例
<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>
InnerHTML
このチュートリアルでは、innerHTMLプロパティを使用してHTML要素のコンテンツを取得します。
ただし、上記の他の方法を学ぶことは、ツリー構造とDOMのナビゲーションを理解するのに役立ちます。
DOMルートノード
完全なドキュメントへのアクセスを許可する2つの特別なプロパティがあります。
document.body
-ドキュメントの本文document.documentElement
-完全なドキュメント
例
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
例
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
nodeNameプロパティ
nodeName
プロパティは、ノードの名前を指定します。
- nodeNameは読み取り専用です
- 要素ノードのnodeNameはタグ名と同じです
- 属性ノードのnodeNameは属性名です
- テキストノードのnodeNameは常に#textです
- ドキュメントノードのnodeNameは常に#documentです
例
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
注: nodeName
常にHTML要素の大文字のタグ名が含まれます。
nodeValueプロパティ
nodeValue
プロパティは、ノードの値を指定します。
- 要素ノードのnodeValueは
null
- テキストノードのnodeValueはテキスト自体です
- 属性ノードのnodeValueは属性値です
nodeTypeプロパティ
プロパティはnodeType
読み取り専用です。ノードのタイプを返します。
例
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
最も重要なnodeTypeプロパティは次のとおりです。
Node | Type | Example |
---|---|---|
ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
TEXT_NODE | 3 | W3Schools |
COMMENT_NODE | 8 | <!-- This is a comment --> |
DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
タイプ2はHTMLDOMでは非推奨です(ただし機能します)。XMLDOMでは非推奨ではありません。