JavaScriptのDOM（ドキュメントオブジェクトモジュール）とは何ですか-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-27 18:30:11

オリジナル

324 人が閲覧しました

What is DOM (Document Object Modle) in JavaScript

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

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

ノード: DOM ツリー内の基本単位。要素、テキスト、属性などです。

DOM ツリー: Web ページをノードのツリーとして表す階層構造。ルートノードはドキュメントであり、各 HTML 要素はそこから分岐するノードです。

DOM 表現の例:

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

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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 の使用方法:

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

要素の作成と削除: 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(): イベントハンドラーを要素にアタッチします。

実際の例:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <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 アプリケーションを作成するための基礎です。

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