ツールのタグ

HTML DOM チュートリアル HTML DOM の概要 HTML DOM ノード HTML DOM メソッド HTML DOM 属性 HTML DOM アクセス HTML DOM - 変更 HTML DOM - HTML コンテンツを変更する HTML DOM - 要素 HTML DOM - イベント HTML DOM ナビゲーション HTML DOM の概要 HTML DOM の例

DOM リファレンスマニュアル

HTML DOM オブジェクト

ホームページ

大きなフロントエンド

HTML

HTML DOM 中国語リファレンスマニュアル

HTML DOM ナビゲーション

ディレクトリ

ツールのタグ

HTML DOM チュートリアル

DOM リファレンスマニュアル

HTML DOM オブジェクト

HTML DOM ナビゲーション

コレクション 49

リーディング 20172

更新時間 2016-09-11

HTML DOM - イベント

HTML DOM の概要

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

HTML DOM ノードリスト

getElementsByTagName() メソッドは、ノードリストを返します。ノードリストはノードの配列です。

次のコードは、ドキュメント内のすべての <p> ノードを選択します:

インスタンス

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>

<script>
x=document.getElementsByTagName("p");
document.write("The innerHTML of the second paragraph is: " + x[1].innerHTML);
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

注:

次のラベルは 0 から始まります。

HTML DOM ノードリストの長さ

length 属性は、ノードリスト内のノードの数を定義します。

長さ属性を使用してノードリストをループできます:

インスタンス

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
  { 
  document.write(x[i].innerHTML);
  document.write("<br>");
  }
</script>
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

インスタンス分析:

すべての p> 要素ノードを取得
各 <p> 要素のテキストノードの値を出力

3 つのノード属性を使用できます:parentNode、firstChild、lastChild文書構造ナビゲーション内。

以下の HTML スニペットをご覧ください:

<html>

<body>

<p>Hello World!</p>
<div>
<p>DOM は非常に便利です!</p>
<p>この例はノードの関係を示しています。</p>
</div>

</body>
</html>

Instance

<html><!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

[インスタンスの実行] ボタンをクリックして表示します。オンラインインスタンス

DOM ルートノード

ここには、すべてのドキュメントにアクセスできる 2 つの特別なプロパティがあります:

document.documentElement - すべてのドキュメント

document.body - ドキュメントの本文

インスタンス

<html><!DOCTYPE html>
<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>

インスタンスの実行»

childNodes と nodeValue

innerHTML プロパティに加えて、childNodes プロパティとnodeValue プロパティを使用して要素のコンテンツを取得することもできます。

次のコードは、id="intro" を持つ <p> 要素の値を取得します:

インスタンス

<html><!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>

<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします。上記の

この例では、getElementById がメソッド、childNodes と nodeValue がプロパティです。

このチュートリアルでは、innerHTML プロパティを使用します。ただし、上記の方法を学習すると、DOM ツリー構造とナビゲーションを理解するのに役立ちます。