JavaScript - ドキュメント オブジェクト モデル (DOM)

<p>dom詳細説明：Webドキュメントのプログラミングインターフェイス

<p>dom（ドキュメントオブジェクトモデル）は、Webドキュメントのプログラミングインターフェイスです。 DOMの助けを借りて、開発者はJavaScriptを使用してWebページと動的に対話し、Webページを操作できます。 HTML DOMを使用すると、JavaScriptはHTML要素のコンテンツを変更できます。

<p>

HTMLページでHTML要素を見つけてアクセスするにはどうすればよいですか？ <p> id

に従ってHTML要素を見つける
• 例：

ラベル名に従ってHTML要素を見つける 例：

<code class="language-javascript">const element = document.getElementById("intro");</code>

• カテゴリ名に従ってHTML要素を見つける 例：

<p> CSSセレクターを使用して、HTML要素を見つけます

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

指定されたCSSセレクター（ID、クラス名、タイプ、属性、属性値など）に一致するすべてのHTML要素を見つけるためのメソッドを使用します。

• 例：「イントロ」のタイプの段落要素を見つける：

HTMLオブジェクトコレクションを使用して、HTML要素を見つけます

ノード（ノード）const x = document.getElementsByClassName("intro");domのコンテンツは、要素、テキスト、属性などのノードです。

• 要素ノード：
は、HTMLまたはXML要素を意味します。たとえば、

、<p>、querySelectorAll()、

など。 <p>

上記の例では、

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

は要素ノードです。

• テキストノード：
要素内のテキストコンテンツを示します。

<p> 要素のテキスト「hello、world！」

新しいHTML要素（ノード）を作成する：<p>

<p> 要素の作成：メソッドを使用してHTML要素を作成します。

<p>テキストノードの作成：<div><h1>を使用してテキストノードを作成します。 <p> <span>要素にテキストを追加します：

<code class="language-html"><h1>Hello, World!</h1></code>

メソッドを使用して、作成された要素にテキストノードを追加します。 <p> <h1>div要素を作成します：

<p> create要素をもう一度使用します。

要素をdivに挿入します：<p>正面に作成された要素をdivに入れます。

<code class="language-html"><h1>Hello, World!</h1></code>

divをドキュメントに挿入します。<p>最後に、ドキュメントの主題（または必要な他の親要素）にdivを追加します。 <h1>

<p>コードフラグメントの例（わずかに定義されたコード、重要な部分のみを保持）：

HTMLスタイルの変更：

1. 文法： document.createElement()例：（）
<p> 上記の方法により、Webページのコンテンツを効果的に操作および変更できます。

以上がJavaScript - ドキュメント オブジェクト モデル (DOM)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。