English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript基本教程

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAX基本教程

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

JS DOM ナビゲーション

HTML DOMは、JavaScriptがノード関係を利用してノードツリーをナビゲートできるようにします

DOMノード

W3C HTML DOM標準、HTMLドキュメントのすべての内容はノードです：

  • 全体のドキュメントはドキュメントノードです

  • 各HTML要素は要素ノードです

  • HTML要素内のテキストはテキストノードです

  • 各HTML属性は属性ノードです（使用は推奨されません）

  • すべてのコメントはコメントノードです

HTML DOMを使用して、JavaScriptでノードツリーのすべてのノードにアクセスできます

新しいノードを作成し、すべてのノードを変更または削除することができます

ノード関係

ノードツリーのノード間には階層関係があります

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

  • ノードツリーでは、最上位のノードをルート（またはルートノード）と呼びます

  • 各ノードには1つの親ノードがありますが、ルートノード（ルートノードには親ノードがありません）を除きます

  • ノードには複数の子ノードを持つことができます

  • 兄弟（兄弟）は同じ親ノードを持つノードです

<html>
　　<head>
<title>DOM　Tutorial</title>
　　</head>
　　
<p>には子供（テキストノード）が1つあります：「 Hello，world」1>DOM　Nodes</h1>
<p>Hello,　World</p>
　　
</html>

上記のHTMLから、読むことができます：
是根节点，并且没有父节点
<html>は根ノードであり、親ノードはありません
<html>は<head>と<body>の親
<head>は<html>の最初の子供
<body>は<html>の最後の子供
および：
<head>には子供（<title>）が1つあります：
<title>には子供（テキストノード）が1つあります：「 DOM Tutorial」1<body>には2つの子供があります：<h
<p>には子供（テキストノード）が1つあります：「 Hello，world」1<p>
<p>には子供（テキストノード）が1つあります：「 DOM Nodes」
<p>には子供（テキストノード）が1つあります：「 Hello，world」1<h

>と<p>は同級

ノード間のナビゲーション

]

兄弟ノードにアクセスするために、以下を使用できます。firstChild子供ノードにアクセス

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
<p>This is third P inside DIV<
alert(para.firstElementChild.nodeName);　//　returns　SPAN
</script>
DOMノードの属性を使用して、ノードの最初の直接子ノードにアクセスします。/›

テストをしてみてください注意：上記の例では、出力は以下のようになります：タグ間のスペースを維持するためのテキストノードが挿入されています。どんなスペースも、#textとして作成されます。#text単一のスペースから複数のスペース、タブなど、すべてのスペースが返されます。

しかし、スペースを削除すると、ノードは挿入されません#textノード、そしてspan要素が段落の最初の子供要素になります：

<p　id="para"><span>First　span</span>　<b>First　Bold</b></p>
<script>
<p>This is third P inside DIV<
alert(para.firstChild.nodeName);　//　returns　SPAN
</script>
テストを見て‹/›

最初の子供にアクセスする方法もこんな感じです：

para.childNodes[0].nodeName;　//　returns　SPAN
テストを見て‹/›

兄弟ノードにアクセスするために、以下を使用できます。lastChildDOMノードの属性を使用して、ノードの最後の直接子ノードにアクセスします。

para.lastChild.nodeName;　//　returns　B
テストを見て‹/›

为避免出现#text又#commentノードfirstChild並lastChild返回该问题，您可以选择使用：

firstElementChild属性返回指定父元素的第一个子元素。

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
<p>This is third P inside DIV<
alert(para.firstElementChild.nodeName);　//　returns　SPAN
</script>
テストを見て‹/›

lastElementChild属性返回指定父元素的最后一个子元素。

<p　id="para">
　　<span>First　span</span>
　　<b>First　Bold</b>
</p>
<script>
<p>This is third P inside DIV<
alert(para.lastElementChild.nodeName);　//　returns　B
</script>
テストを見て‹/›

注：注：本nodeName

は読み取り専用のプロパティであり、現在のノードを文字列の名前として返します。

兄弟ノードにアクセスするために、以下を使用できます。親節点にアクセスparentNode

<div>
　　　属性を使用してDOMツリーの指定された節点の親をアクセスします。/p>
　　　<p>This is first P inside DIV</p>
　　　<p id="para">This is second P inside DIV</p>
</div>
<script>
<p>This is third P inside DIV<
var para = document.getElementById("para");　　//　alert(para.parentNode.nodeName);
</script>
テストを見て‹/›

returns DIVさらに、以下を使用してparentElement

属性は指定された要素の親要素を返します。

兄弟ノードにアクセスするために、以下を使用できます。previousSiblingおよびnextSibling属性を使用してDOMツリーの前のと次のノードにアクセスします。

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>
テストを見て‹/›

または、以下を使用してpreviousElementSiblingおよびnextElementSiblingをスキップして、前のと次の同じ階層の要素を取得するために使用します。

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>
テストを見て‹/›

textContent属性はノードのテキスト内容を表します。

DOMのルートノード

以下の2つの属性は、ドキュメント全体にアクセスを許可します：

document.body属性はドキュメントの要素を設定または返します。

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOMのルートノード</p>
　　<p>document.bodyプロパティはドキュメントのbody要素を設定または返します。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>
テストを見て‹/›

document.documentElement属性はドキュメントの<html>要素。

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOMのルートノード</p>
　　<p>document.documentElementプロパティはドキュメントのルート要素を返します。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>
テストを見て‹/›

nodeType属性

nodeType属性は指定されたノードのノードタイプを数値形式で返します。

var x = document.getElementById("myPara").nodeType;
テストを見て‹/›

DOMツリーは、要素、テキスト、コメントなどの異なるタイプのノードで構成されています。

各ノードにはnodeType属性は、処理するノードタイプを検索するために使用できます。

以下に最も重要なノードタイプを示します：

ノードタイプ例
ELEMENT_NODE1個<p class="heading">こんにちは、世界</p>
ATTRIBUTE_NODE2　class =“heading”（推奨しない）
TEXT_NODE3こんにちは、世界
COMMENT_NODE8<！--これはコメント-->
DOCUMENT_NODE9HTMLドキュメント自体（<html>の親）
DOCUMENT_TYPE_NODE10<！doctype html>
JS Window ブラウザオブジェクトモデルJS DOM 要素属性の変更