Dom ノードと要素、この 2 つの違いは何ですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Dom ノードと要素、この 2 つの違いは何ですか?

青灯夜游

May 20, 2021 am 10:34 AM

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 id="My-nbsp-Page">My Page</h2>
    <p id="content">Thank you for visiting my web page!</p>
  </body>
</html>

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

Dom ノードと要素、この 2 つの違いは何ですか?

## はドキュメントツリー内のノードです。これには、

と という 2 つの子ノードがあります。

3 つの子ノードを持つノード: コメントノード 、タイトル、段落

。

ノードの親ノードは、 ノードです。 HTML ドキュメント内のタグはノードを表しますが、興味深いことに、通常のテキストもノードです。段落ノード

には、テキストノード 「Web ページにアクセスしていただきありがとうございます!」 という 1 つの子ノードがあります。

1.2 ノードタイプ

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

Node.nodeType 属性にあります。

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

Node.ATTRIBUTE_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 ドキュメント内でマークアップを使用して記述されたノードです。

、

、<code>、</code> 、

、

はタグで表現されるため、すべて要素です。

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

Node は、ノード HTMLElement## のコンストラクターです。 # は、JS DOM の要素のコンストラクターです。段落はノードと要素の両方であり、Node と HTMLElement<pre class='brush:php;toolbar:false;'>const paragraph = document.querySelector(&#39;p&#39;); paragraph instanceof Node; // => true paragraph instanceof HTMLElement; // => true</pre> の両方のインスタンスです。簡単に言うと、要素は猫と同じようにノードのサブタイプです。は動物です。サブタイプは同じです。

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

ノードと要素を区別することに加えて、ノードのみを含む DOM 属性とノードのみを含む DOM 属性を区別することも必要です。要素。

ノードタイプの次のプロパティは、ノードまたはノードのコレクション (

NodeList

) として評価されます: <pre class='brush:php;toolbar:false;'>node.parentNode; // Node or null node.firstChild; // Node or null node.lastChild; // Node or null node.childNodes; // NodeList</pre> ただし、次のプロパティは要素または要素のコレクションです。 (

HTMLCollection

): <pre class='brush:php;toolbar:false;'>node.parentElement; // HTMLElement or null node.children; // HTMLCollection</pre>

node.childNodes

とnode.children は両方とも子のリストを返すのに、なぜ両方のプロパティがあるのでしょうか?良い質問！テキストを含む次の段落要素について考えてみましょう:

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

demo

を開いて、次の childNodes と children# を確認します。段落ノード ##Properties:

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

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 の両方があるため、アクセスする子のセット (すべての子ノードまたは要素である子のみ) を選択できます。

4. 概要

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

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

英語の元のアドレス: https://dmitripautin.com/dom-node-element/

著者: Shadeed

出典: dmitripavlutin

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

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

声明

この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles