JavaScriptのDOM（ドキュメントオブジェクトモジュール）とは何ですか

DOM (Document Object Model) は、Web ドキュメント用のプログラミング インターフェイスです。これは Web ページの構造をオブジェクトのツリーとして表し、各オブジェクトは要素、属性、テキスト コンテンツなどのページの一部に対応します。

JavaScript では、DOM を使用して、HTML または XML ドキュメントをプログラム的に操作できます。これにより、Web ページのコンテンツ、構造、スタイルを動的に変更できます。

DOM の主要な概念:

1. ドキュメント: Web ページ全体を指します。
2. 要素:
   、

   、 などの HTML タグを表します。

3. ノード: DOM ツリー内の基本単位。要素、テキスト、属性などです。
4. DOM ツリー: Web ページをノードのツリーとして表す階層構造。ルート ノードはドキュメントであり、各 HTML 要素はそこから分岐するノードです。

DOM 表現の例:

次のような HTML ドキュメントの場合:


  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

JavaScript による DOM の使用方法:

1. 要素へのアクセス: JavaScript は、document.getElementById() や document.querySelector() などのメソッドを使用して、DOM から要素を選択し、アクセスできます。

   let heading = document.getElementById("content");

1. 要素の操作: JavaScript は要素のコンテンツ、属性、またはスタイルを変更できます。

   heading.innerHTML = "New Content";
   heading.style.color = "red";

1. イベント処理: JavaScript は、クリックやキーの押下などのユーザー アクションに応答するために、DOM 要素にイベント リスナーをアタッチできます。

   document.getElementById("myButton").addEventListener("click", function() {
     alert("Button clicked!");
   });

1. 要素の作成と削除: JavaScript は、新しい要素を動的に作成したり、既存の要素を削除したりできます。

   const newElement = document.createElement("div");
   document.body.appendChild(newElement);

DOM が重要な理由:

• JavaScript が Web ページの構造やコンテンツと対話し、操作する方法を提供します。
• ページのリロード (UI の更新やユーザー入力の処理など) を必要とせずに、動的でインタラクティブな Web ページを実現できます。

DOM メソッド:

JavaScript で一般的に使用される DOM メソッドをいくつか示します:

• getElementById(): ID によって要素を選択します。
• querySelector(): CSS セレクターを使用して、最初に一致する要素を選択します。
• createElement(): 新しい HTML 要素を作成します。
• appendChild(): 新しい子ノードを要素に追加します。
• RemoveChild(): 要素から子ノードを削除します。
• setAttribute(): 要素に属性を設定します。
• addEventListener(): イベント ハンドラーを要素にアタッチします。

実際の例:

  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

この例では、h1 要素が選択され、そのコンテンツが更新され、クリック イベント リスナーがそれにアタッチされます。見出しをクリックするとアラートが表示されます。

DOM は、JavaScript を使用して Web ページの構造を動的に操作するための重要な概念であり、インタラクティブな Web アプリケーションを作成するための基礎です。