Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript HTML DOMナビゲーション

HTML DOMを使用すると、ノードの関係を使用してノードツリー内を移動できます。

DOMノード

W3C HTML DOM標準によると、HTMLドキュメント内のすべてがノードです。

  • ドキュメント全体がドキュメントノードです
  • すべてのHTML要素は要素ノードです
  • HTML要素内のテキストはテキストノードです
  • すべてのHTML属性は属性ノードです(非推奨)
  • すべてのコメントはコメントノードです
DOM HTML tree

HTML DOMを使用すると、ノードツリー内のすべてのノードにJavaScriptからアクセスできます。

新しいノードを作成したり、すべてのノードを変更または削除したりできます。

ノードの関係

ノードツリー内のノードは相互に階層関係を持ちます。

親、子、および兄弟という用語は、関係を説明するために使用されます。

  • ノードツリーでは、最上位のノードをルート(またはルートノード)と呼びます。
  • すべてのノードには、ルート(親を持たない)を除き、親が 1つだけあります。
  • ノードは多数の子を持つことができます。
  • 兄弟(兄弟または姉妹)は、同じ親を持つノードです。
<html>   <head>     <title>DOM Tutorial</title>   </head>  <body>     <h1>DOM Lesson one</h1>     <p>Hello world!</p>   </body> </html>
Node tree

上記の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>は、「Hello world!」という子が1つあります
  • <h1>と<p>は、兄弟です

ノード間の移動

次のノードプロパティを使用して、JavaScriptでノード間を移動できます。

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

子ノードとノード値

DOM処理でよくあるエラーは、要素ノードにテキストが含まれていると想定することです。

例：

<title id="demo">DOM Tutorial</title>

要素ノード<title>(上記の例)にはテキストが含まれません。

これには、値「DOM Tutorial」を持つテキストノードが含まれています。

テキストノードの値には、ノードの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>

内部HTML

このチュートリアルでは、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" (非推奨)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- これはコメントです -->
DOCUMENT_NODE 9 HTMLドキュメント自体 (<html>の親)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type2はHTML DOMでは推奨されていません(ただし機能します)。XML DOMでは非推奨ではありません。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル