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

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

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

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

id

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

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

const element = document.getElementById("intro");

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

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

const element = document.getElementsByTagName("p");

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

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

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

ノード（ノード）

要素ノード：

は、HTMLまたはXML要素を意味します。たとえば、、

、querySelectorAll()、

など。

上記の例では、

const x = document.querySelectorAll("p.intro");

は要素ノードです。

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

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

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

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

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

<h1 id="Hello-World">Hello, World!</h1>

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

<h1></h1>div要素を作成します：

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

要素をdivに挿入します：

正面に作成された要素をdivに入れます。

<h1 id="Hello-World">Hello, World!</h1>

divをドキュメントに挿入します。

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

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

HTMLスタイルの変更：

1. 文法： document.createElement()例：（）

上記の方法により、Webページのコンテンツを効果的に操作および変更できます。