DOM ノードと要素の違いは何ですか-jsチュートリアル-php.cn

DOM ノードと要素の違いは何ですか

青灯夜游

リリース： 2021-01-21 10:10:06

転載

2590 人が閲覧しました

関連する推奨事項: 「JavaScript ビデオチュートリアル」

ドキュメントオブジェクトモデル (DOM) は HTML を変換するモデルですまたは XML ドキュメントは、各ノードがドキュメントのオブジェクトであるツリー構造へのインターフェイスとして表示されます。 DOM には、ツリーをクエリしたり、構造やスタイルを変更したりするための一連のメソッドも用意されています。

DOM では、ノードとよく似た用語 要素 (Element) も使用します。では、DOM ノードと要素の違いは何ですか?

1. DOM ノード

ノードと要素の違いを理解するための鍵は、ノードとは何かを理解することです。

より高い観点から見ると、DOM ドキュメントはノード階層で構成されます。各ノードには親や子を持つことができます。

次の HTML ドキュメントを見てください:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- Page Body -->
    <h2>My Page</h2>
    <p id="content">Thank you for visiting my web page!</p>
  </body>
</html>

ログイン後にコピー

このドキュメントには次のノード階層が含まれています:

<html> はドキュメントツリー内のノードです。これには、<head> と <body> という 2 つの子ノードがあります。

<body> 3 つの子ノードを持つノード: コメントノード 、タイトル< h2&gt ;、段落 。 <body> ノードの親ノードは、<html> ノードです。

HTML ドキュメント内のタグはノードを表しますが、興味深いことに、通常のテキストもノードです。段落ノード  には、テキストノード 「Web ページにアクセスしていただきありがとうございます!」 という 1 つの子ノードがあります。

1.2 ノードタイプ

これらのさまざまなタイプのノードをどのように区別すればよいでしょうか?答えは DOM ノードインターフェイス、特に Node.nodeType 属性にあります。

Node.nodeType には、ノードタイプを表す次の値のいずれかを指定できます:

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE

定数はノードタイプを意味のある形で示します: たとえば、Node.ELEMENT_NODE は要素を表しますノード、Node.TEXT_NODE はテキストノード、Node.DOCUMENT_NODE はドキュメントノードなどを表します。

たとえば、段落ノードを選択し、その nodeType 属性を表示してみましょう。

const paragraph = document.querySelector(&#39;p&#39;);

paragraph.nodeType === Node.ELEMENT_NODE; // => true

ログイン後にコピー

ノードドキュメントツリー全体を表すノードタイプは Node です。 DOCUMENT_NODE：

document.nodeType === Node.DOCUMENT_NODE; // => true

ログイン後にコピー

2. DOM 要素

DOM ノードの知識を習得したら、次は DOM ノードと要素を区別します。

ノードの用語を理解していれば、答えは明白です。要素は、ドキュメント、コメント、テキストなどのタイプと同様に、特定のタイプ element (Node.ELEMENT_NODE) のノードです。。

つまり、要素とは、HTML ドキュメント内でマークアップを使用して記述されたノードです。 <html>、<head>、<title>、<body>、<h2&gt ;、 はタグで表現されるため、すべて要素です。

ドキュメントタイプ、コメント、テキストノードは、タグを使用して記述されていないため、要素ではありません。

Node は、ノード

HTMLElement## のコンストラクターです。 # は、JS DOM の要素のコンストラクターです。段落はノードと要素の両方であり、

Node と HTMLElement

const paragraph = document.querySelector(&#39;p&#39;);

paragraph instanceof Node;        // => true
paragraph instanceof HTMLElement; // => true

ログイン後にコピー

の両方のインスタンスです。簡単に言うと、要素は猫と同じようにノードのサブタイプです。は動物です。サブタイプは同じです。

3. DOM 属性: ノードと要素

ノードと要素を区別することに加えて、ノードのみまたは要素のみを含む DOM 属性も区別する必要があります。

ノードタイプの次のプロパティは、ノードまたはノードのコレクション (NodeList) として評価されます:

node.parentNode; // Node or null

node.firstChild; // Node or null
node.lastChild;  // Node or null

node.childNodes; // NodeList

ログイン後にコピー

ただし、次のプロパティは要素または要素のコレクションです。 (HTMLCollection):

node.parentElement; // HTMLElement or null

node.children;      // HTMLCollection

ログイン後にコピー

node.childNodes

 とnode.children は両方とも子のリストを返すのに、なぜ両方のプロパティがあるのでしょうか?良い質問！

テキストを含む次の段落要素について考えてみましょう:

<p>
  <b>Thank you</b> for visiting my web page!
</p>

ログイン後にコピー

デモを開いて、段落ノードの childNodes プロパティと children プロパティを確認します。

const paragraph = document.querySelector(&#39;p&#39;);

paragraph.childNodes; // NodeList:       [HTMLElement, Text]
paragraph.children;   // HTMLCollection: [HTMLElement]

ログイン後にコピー

paragraph.childNodesこのコレクションには 2 つのノードが含まれています: ありがとう、および 私の Web ページにアクセスしていただきました!テキストノード!

ただし、paragraph.children コレクションには Thank you という項目が 1 つだけ含まれています。

paragraph.children

 には要素のみが含まれるため、テキスト ノードはここには含まれません。そのタイプは要素 (

) ではなくテキスト (Node.TEXT_NODE) であるためです。ノード.ELEMENT_NODE)。

node.childNodes と node.children の両方があるため、アクセスする子のセット (すべての子ノードまたは要素である子のみ) を選択できます。

4. 概要

DOM ドキュメントはノードの階層的なコレクションであり、各ノードには親や子を持つことができます。ノードとは何かを理解していれば、DOM ノードと要素の違いを理解するのは簡単です。

ノードには型があり、要素の型もその 1 つであり、HTML 文書では要素はタグによって表現されます。

プログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！

以上がDOM ノードと要素の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

DOM ノードと要素の違いは何ですか

1. DOM ノード

1.2 ノード タイプ

2. DOM 要素

4. 概要

1.2 ノードタイプ