ホームページ > 記事 > ウェブフロントエンド > Dom ノードと要素、この 2 つの違いは何ですか?
Dom ノードと要素、この 2 つの違いは何ですか?
- 青灯夜游転載
- 2021-05-20 10:34:422875ブラウズ
ドキュメント オブジェクト モデル (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>このドキュメントには次のノード階層が含まれています:
## はドキュメント ツリー内のノードです。これには、
と という 2 つの子ノードがあります。
3 つの子ノードを持つノード: コメント ノード 、タイトル、段落 。
ノードの親ノードは、 ノードです。 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('p'); paragraph.nodeType === Node.ELEMENT_NODE; // => trueノード ドキュメント ツリー全体を表すノード タイプは
Node です。 DOCUMENT_NODE：
document.nodeType === Node.DOCUMENT_NODE; // => true
2. DOM 要素
DOM ノードの知識を習得したら、次は DOM ノードと要素を区別します。 ノードの用語を理解していれば、答えは明白です。要素は、ドキュメント、コメント、テキストなどのタイプと同様に、特定のタイプelement (Node.ELEMENT_NODE) のノードです。 。
、
、、、
はタグで表現されるため、すべて要素です。
Node は、ノード HTMLElement## のコンストラクターです。 # は、JS DOM の要素のコンストラクターです。段落はノードと要素の両方であり、Node と HTMLElement<pre class="brush:js;toolbar:false;">const paragraph = document.querySelector(&#39;p&#39;);
paragraph instanceof Node; // => true
paragraph instanceof HTMLElement; // => true</pre> の両方のインスタンスです。簡単に言うと、要素は猫と同じようにノードのサブタイプです。は動物です。サブタイプは同じです。
ノードと要素を区別することに加えて、ノードのみを含む DOM 属性とノードのみを含む DOM 属性を区別することも必要です。要素。
ノード タイプの次のプロパティは、ノードまたはノードのコレクション (
NodeList) として評価されます: <pre class="brush:js;toolbar:false;">node.parentNode; // Node or null
node.firstChild; // Node or null
node.lastChild; // Node or null
node.childNodes; // NodeList</pre> ただし、次のプロパティは要素または要素のコレクションです。 (
): <pre class="brush:js;toolbar:false;">node.parentElement; // HTMLElement or null
node.children; // HTMLCollection</pre>
とnode.children は両方とも子のリストを返すのに、なぜ両方のプロパティがあるのでしょうか?良い質問！ テキストを含む次の段落要素について考えてみましょう:
<p> <b>Thank you</b> for visiting my web page! </p>demo
を開いて、次の childNodes と children# を確認します。段落ノード ##Properties:
const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]
Thank you および 私の Web ページにアクセスしていただきありがとうございます!テキスト ノード! ただし、paragraph.children
Thank you という項目が 1 つだけ含まれています。 paragraph.children
) ではなくテキスト (Node.TEXT_NODE) であるためです。ノード.ELEMENT_NODE)。
node.childNodes と node.children の両方があるため、アクセスする子のセット (すべての子ノードまたは要素である子のみ) を選択できます。
4. 概要
DOM ドキュメントはノードの階層的なコレクションであり、各ノードには親や子を持つことができます。ノードとは何かを理解していれば、DOM ノードと要素の違いを理解するのは簡単です。
ノードには型があり、要素の型もその 1 つであり、HTML 文書では要素はタグによって表現されます。
英語の元のアドレス: https://dmitripautin.com/dom-node-element/
著者: Shadeed
出典: dmitripavlutin
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！
以上がDom ノードと要素、この 2 つの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。