ドキュメント オブジェクト モデル (DOM) は、HTML または XML ドキュメントをツリー構造として扱うインターフェイスです。各ノードはドキュメントのオブジェクトです。 DOM には、ツリーをクエリしたり、構造やスタイルを変更したりするための一連のメソッドも用意されています。
DOM では、ノードとよく似た用語 要素 (Element) も使用します。では、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 つの子ノードを持つノード: コメント ノード
、タイトル
< h2> ;、段落
。
ノードの親ノードは、
ノードです。
HTML ドキュメント内のタグはノードを表しますが、興味深いことに、通常のテキストもノードです。段落ノード には、テキスト ノード
「Web ページにアクセスしていただきありがとうございます!」 という 1 つの子ノードがあります。
Node.nodeType 属性にあります。
Node.nodeType には、ノード タイプを表す次の値のいずれかを指定できます:
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
element (Node.ELEMENT_NODE) のノードです。 。
、
、
、
、
はタグで表現されるため、すべて要素です。
Node は、ノード
HTMLElement## のコンストラクターです。 # は、JS DOM の要素のコンストラクターです。段落はノードと要素の両方であり、Node
と HTMLElement
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const paragraph = document.querySelector(&#39;p&#39;);
paragraph instanceof Node; // => true
paragraph instanceof HTMLElement; // => true</pre><div class="contentsignin">ログイン後にコピー</div></div>
の両方のインスタンスです。簡単に言うと、要素は猫と同じようにノードのサブタイプです。は動物です。サブタイプは同じです。
ノード タイプの次のプロパティは、ノードまたはノードのコレクション (
NodeList) として評価されます: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>
ただし、次のプロパティは要素または要素のコレクションです。 (
): <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">node.parentElement; // HTMLElement or null
node.children; // HTMLCollection</pre><div class="contentsignin">ログイン後にコピー</div></div>
とnode.children は両方とも子のリストを返すのに、なぜ両方のプロパティがあるのでしょうか?良い質問! テキストを含む次の段落要素について考えてみましょう:
<p> <b>Thank you</b> for visiting my web page! </p>
を開いて、次の childNodes と children# を確認します。段落ノード ##Properties:
const paragraph = document.querySelector('p'); paragraph.childNodes; // NodeList: [HTMLElement, Text] paragraph.children; // HTMLCollection: [HTMLElement]
paragraph.childNodesコレクションには 2 つのノードが含まれています: Thank you および
私の Web ページにアクセスしていただきありがとうございます!テキスト ノード!
ただし、
paragraph.children
Thank you という項目が 1 つだけ含まれています。
paragraph.children
) ではなくテキスト (Node.TEXT_NODE
) であるためです。ノード.ELEMENT_NODE)。
node.childNodes
と node.children
の両方があるため、アクセスする子のセット (すべての子ノードまたは要素である子のみ) を選択できます。
DOM ドキュメントはノードの階層的なコレクションであり、各ノードには親や子を持つことができます。ノードとは何かを理解していれば、DOM ノードと要素の違いを理解するのは簡単です。
ノードには型があり、要素の型もその 1 つであり、HTML 文書では要素はタグによって表現されます。
英語の元のアドレス: https://dmitripautin.com/dom-node-element/
著者: Shadeed
出典: dmitripavlutin
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !
以上がDom ノードと要素、この 2 つの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。