JavaScript HTML DOM ナビゲーション (概要共有)

この記事では、javascript に関する関連知識を提供します。主に HTML DOM ナビゲーションに関する問題を紹介します。一緒に見ていきましょう。皆さんのお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

JS HTML DOM ナビゲーション

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

DOM ノード

W3C HTML DOM 標準によれば、HTML ドキュメント内のすべてのものはノードです:

• ドキュメント全体はドキュメント ノード
• #各 HTML 要素は要素ノードです
• HTML 要素内のテキストはテキスト ノードです
• 各 HTML 属性は属性ノードです
• すべてのコメントはコメントです ノード
  
  HTML DOM では、ノード ツリー内のすべてのノードに JavaScript を介してアクセスできます。

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

ノード関係

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

• 用語 (親、子と兄弟、親、子と兄弟) は、これらの関係を説明するために使用されます。
  • ノード ツリーでは、最上位のノードはルート (ルート) と呼ばれます。ノード)
  • ルートを除くすべてのノードには親ノードがあります (ルート ノードには親ノードがありません)
  • ノードは一定数の子を持つことができます
  • 兄弟 (兄弟)または姉妹)、同じ親を持つノードを参照します

例:

   
       <title>DOM 教程</title>
   

  
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   

从以上的 HTML 中您能读到以下信息：

-  是根节点
-  没有父
-  是  和  的父
-  是  的第一个子
-  是  的最后一个子
**同时：**

-  有一个子：<title>
- <title> 有一个子（文本节点）："DOM 教程"
- </title>
</title> 有两个子：<h1> 和 </h1><p>
- </p><h1> 有一个子："DOM 第一课"
- </h1><p> 有一个子："Hello world!"
- </p><h1> 和 </h1><p> 是同胞</p>

ノード間の移動

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

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

子ノードとノード値

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

例:

<title>DOM 教程</title>

(上記の例の) 要素ノード

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

テキスト ノードの値は、ノードの innerHTML 属性を通じてアクセスできます。

1. var myTitle = document.getElementById("demo").innerHTML;

innerHTML 属性へのアクセスは、最初のノードの nodeValue へのアクセスと同じです。子ノード:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

次のように最初の子ノードにアクセスすることもできます:

3. var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

次の 3 つの例では、

# のテキストを取得します。 ## 要素を ## にコピーします。

# 要素内:

インスタンス 1

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>

インスタンス 2

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

インスタンス 3

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

InnerHTMLinnerHTML を使用して HTML 要素のコンテンツを取得します。

DOM ルート ノード

には、完全なドキュメントへのアクセスを許可する 2 つの特別なプロパティがあります:

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

document.documentElement -完全なドキュメント

インスタンス

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>

<script>
 alert(document.body.innerHTML);
</script>

インスタンス

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

nodeName 属性

nodeName

属性はノードの名前を指定します。

nodeName は読み取り専用です

要素ノードのノード名はラベル名と同等です
• 属性ノードのノード名は属性の名前です
• テキスト ノードのノード名
• 常に
#text
• ドキュメント ノードのノード名 常に
#document
• インスタンス:
  

  <h1>我的第一张网页</h1>
  <p>Hello!</p>
  
  <script>
  document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
  </script>

  Return H1

Notes

:
nodeName には、HTML 要素の 大文字 タグ名が常に含まれます。
nodeValue 属性

nodeValue 属性はノードの値を指定します。

要素ノードのnodeValueは未定義です

テキストノードのnodeValueはテキストテキストです
• 属性ノードのnodeValueは属性値です
• nodeType 属性

nodeType 属性はノードのタイプを返します。 **nodeType は読み取り専用です。

インスタンス

<h1>我的第一张网页</h1>
<p>Hello!</p>

<script>
document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

Return 1最も重要なnodeType属性は次のとおりです:

タイプ 2 は HTML DOM では非推奨になりました。 XML DOM では非推奨ではありません。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がJavaScript HTML DOM ナビゲーション (概要共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。