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

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

JS HTML DOM ナビゲーション

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

DOM ノード

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

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

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

ノード関係

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

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

例:

 
DOM 第一课
 
Hello world!

从以上的 HTML 中您能读到以下信息： - 是根节点 - 没有父 - 是 和 的父 - 是 的第一个子 - 是 的最后一个子 **同时：** - 有一个子：  有两个子：
 和 
 - 
 有一个子："DOM 第一课" - 
 有一个子："Hello world!" - 
 和 
 是同胞

ノード間の移動

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

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

子ノードとノード値

例:

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

   ログイン後にコピー

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

インスタンス 1

我的第一张页面
 
Hello!
 

我的第一张页面
 
Hello!
 

我的第一张页面
 
Hello!
 

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

インスタンス

Hello World!
 
 
DOM 很有用！
 
本例演示 document.body 属性。
 
 

インスタンス

Hello World!
 
 
DOM 很有用！
 
本例演示 document.documentElement 属性。
 
 

nodeName 属性

nodeName

nodeName は読み取り専用です

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

  我的第一张网页
   
  Hello!
   

  ログイン後にコピー
  Return H1

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

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

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

インスタンス

我的第一张网页
 
Hello!
 

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

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

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