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

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

1. DOMとは何か

DOM ドキュメント オブジェクト モデルは、HTML および XML ドキュメントのプログラミング インターフェイスです。論理ツリーを使用してドキュメントを表します。ツリーの各ブランチの終点はnodeです。各ノードにはobjectsが含まれており、ドキュメントの要素を作成、変更、または削除できます。イベントをこれらの要素に追加して、ページをより動的にすることもできます。

DOM は HTML ドキュメントをノードのツリーとして扱います。ノードは HTML 要素を表します。 DOM ツリー構造をよりよく理解するために、次の HTML コードが提供されています。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>DOM オブジェクト モデル</h1>
        <h2>DOM ツリー構造</h2>
    </本文>
</html>

ドキュメントはルート ノードと呼ばれ、1 つの子ノード<html>要素) が含まれます。 <html>要素には、<head> 要素と <body> 要素という 2 つの子要素が含まれています。

以下に示すように、 <head><body>にはそれぞれ独自の子要素があります。

ドキュメント内のこれらの要素には、 JavaScriptを介してアクセスし、変更できます。以下では、 JavaScriptを使用してDOMを操作する方法を紹介します。

2. 要素を選択する

ドキュメント内の要素を選択するにはどうすればよいですか? HTML ドキュメント内の要素を選択する方法はいくつかあります。そのうちの 3 つを次に示します。

  • getElementById():特定の ID に一致する要素を返します。
  • querySelector():指定されたセレクターまたはセレクター グループに一致するドキュメント内の最初のHTMLElementオブジェクトを返します。
  • querySelectorAll():指定されたセレクター グループに一致するドキュメント内の要素のリストを返します (ドキュメントのノードの深さ優先、事前順序トラバーサルを使用)。

3. getElementById()

HTML では、 id HTML 要素の一意の識別子です。つまり、2 つの異なる要素に同じ id を設定することはできません。ドキュメント全体で id が一意であることを確認する必要があります。

JavaScriptでは、 id 名を使用して HTML タグを取得できます。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>DOM オブジェクト モデル</h1>
        <h2>DOM ツリー構造</h2>
        <p id="intro">DOM は Document Object Model の略で、プログラミング インターフェイスです。 </p>

        <script type="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(要素Intro);
        </スクリプト>
    </本文>
</html>

開発者ツールを開きます:

オブジェクトのテキスト コンテンツを取得する必要がある場合は、 textContentまたはinnerTextを使用できます。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>DOM オブジェクト モデル</h1>
        <h2>DOM ツリー構造</h2>
        <p id="intro">DOM は Document Object Model の略で、プログラミング インターフェイスです。 </p>

        <script type="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(要素Intro);
            // 要素内のテキストコンテンツを取得します。const elemText = elemIntro.textContent; // elemIntro.innerText 
            console.log(要素テキスト);
        </スクリプト>
    </本文>
</html>

コントローラーを開いて表示:

4. クエリセレクタ()

このメソッドを使用して、1 つ以上の CSS セレクターを持つ要素を検索します。以下は、ナショナル デーの映画スケジュール情報を例に、 querySelector()を介して対応するタイトルとリスト要素を取得します。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul class="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const elemList = document.querySelector(".movi​​es");
            コンソールログ("h1");
            console.log(要素タイトル);
            console.log("ul ムービー");
            console.log(要素リスト);
        </スクリプト>
    </本文>
</html>

ブラウザでドキュメントを開き、開発者ツールをオンにすると、次の効果を確認できます。

5. クエリセレクタAll()

このメソッドは、CSS セレクターに一致するすべての要素を検索し、ノードのリストを返します。映画のスケジュールのすべての li 要素を検索してみましょう。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul class="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movi​​es > li");
            console.log(ムービーアイテム);
        </スクリプト>
    </本文>
</html>

コンソール印刷の効果は次のとおりです。

上記のノード リストは次のように走査できます。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul class="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movi​​es > li");
            movieItems.forEach((item) => {
                console.log(アイテム);
            });
        </スクリプト>
    </本文>
</html>

コンソール印刷の効果は次のとおりです。

6. 新しい要素を追加する

ドキュメントに新しい要素を追加するにはどうすればよいですか? document.createElement()を使用して DOM ツリーに新しい要素を追加し、 textContentを使用して新しい要素にコンテンツを追加できます。次の例では、映画スケジュールのリストに新しい映画スケジュールを追加します。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul class="映画" id="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>

        <script type="text/javascript">
            const movieItems = document.getElementById("映画");
            const newMovie = document.createElement("li");
            newMovie.textContent = "ワシはニワトリを捕まえる";
            ムービーアイテムに子要素を追加します。
        </スクリプト>
    </本文>
</html>

実行後のページ効果は次のようになります。

7. CSSスタイルを変更する

インライン CSS スタイルを変更するにはどうすればいいですか? style 属性を使用すると、HTML ドキュメント内の CSS スタイルを変更できます。建国記念日の映画スケジュールを例にとると、ページ タイトルの h1 要素のフォント サイズとフォント色を変更します。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul class="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>

        <script type="text/javascript">
            定数 pageTitle = document.querySelector("h1");
            pageTitle.style.fontSize = "24px";
            ページタイトル.style.color = "#0000FF";
        </スクリプト>
    </本文>
</html>

実行後のページ効果は次のようになります。

CSS スタイルの属性に関しては、JavaScript では camelCase が使用されます。たとえば、 JavaScriptでのfont-sizeに対応する属性はfontSizebackground-color対応する属性はbackgroundColorです。

8. イベントを監視する方法

ページ上の要素のイベントをどのように使用すればよいですか?次の例では、 addEventListener()メソッドを使用して、ボタンをクリックすることで新しい映画のスケジュールをリストに追加します。

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
        <meta http-equiv="X-UA-compatible" content="ie=edge" />
        <title>DOM ツリー構造</title>
    </head>
    <本文>
        <h1>2021年建国記念日映画スケジュール</h1>
        <ul id="映画">
            <li>長津湖</li>
            <li>父と私</li>
            <li>鉄道ヒーローズ</li>
        </ul>
        <button id="addNew">映画「Eagle Catches Chicken」を追加する</button>
        <script type="text/javascript">
            const 映画リスト = document.getElementById("映画");
            ボタン = document.getElementById("addNew");
            const addNewMovie = (movieTitle, elemTarget) => {
                const newMovie = document.createElement("li");
                newMovie.textContent = ムービータイトル;
                newMovie.style.color = "#ff0000";
                要素Target.appendChild(新しいムービー);
            };
            button.addEventListener("クリック", () => {
                addNewMovie("鷲は鶏を捕まえる", moviesList);
            });
        </スクリプト>
    </本文>
</html>

実行後のページ効果は次のようになります。

実際のプロジェクトでは、イベントの監視と処理はこれよりも複雑です。現代の WEB 開発では、豊富なフロントエンド フレームワークがすでにイベント処理を非常にうまくカプセル化しており、開発者がイベント バブリング、イベント キャプチャ、イベント委任などのイベント監視の関連知識を忘れてしまうほどです。この記事では、これらについては詳しく説明しません。

結論は:

DOM ドキュメント オブジェクト モデル。HTML および XML ドキュメントのプログラミング インターフェイスです。ブラウザが最初にHTMLドキュメントを読み込む (解析する) ときに、HTML ドキュメントに基づいた大きなオブジェクト、つまり非常に大きなオブジェクトを作成します。これが DOM です。 HTML からモデル化されたツリー構造です。 DOM は、 DOM構造または特定の要素やノードを操作および変更するために使用されます。

JavaScriptのドキュメント オブジェクト モデル DOM に関するこの記事はこれで終わりです。JavaScript JavaScriptドキュメント オブジェクト モデル DOM に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript ドキュメント オブジェクト モデル DOM
  • JavaScript DOM オブジェクト操作
  • JavaScript 変数 Dom オブジェクトのすべてのプロパティ
  • JS を使用して DOM オブジェクト内の指定されたノードにアクセスする方法の例
  • JS を使用して DOM オブジェクト (タグ) のカスタム属性を読み取る方法について簡単に説明します。
  • JS の基本における DOM 内のドキュメント オブジェクトの一般的な属性メソッドの詳細な説明
  • DOM 内の要素オブジェクトの属性メソッドの詳細な説明 (js 基本編)
  • JavaScriptはDOMオブジェクトセレクタを実装する
  • JavaScript DOMオブジェクトの詳細な理解
  • JavaScript - DOM操作 - Window.documentオブジェクトの詳しい説明
  • jQueryオブジェクトとJavaScriptオブジェクト、つまりDOMオブジェクトは相互に変換されます
  • jsオブジェクト関係図はDOM操作を容易にします
  • JavaScript DOM オブジェクト学習サンプルコード
  • DOMオブジェクトに対するJavaScript操作の詳細な説明

<<:  Dockerコンテナが起動直後に終了する問題を解決する

>>:  HTML DOM入門_PowerNode Javaアカデミー

推薦する

Docker コンテナのネットワーク障害に対する 6 つの解決策

Docker コンテナのネットワーク障害に対する 6 つの解決策注: 以下の方法は、コンテナ内のパブ...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...

Tomcatのサーバーオプションの詳細な説明

1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...

Ubuntu16.04はphp5.6ウェブサーバー環境を構築します

Ubuntu 16.04 はデフォルトで PHP7.0 環境をインストールしますが、PHP7 は一部...

CentOS7 ファイアウォール操作コマンドの完全なリスト

目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...

Windows Server 2016 標準キー アクティベーション キー シリアル番号

Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

Web開発でボックスを中央に配置するいくつかの方法

1. ボックスを中央に配置するいくつかの方法を記録します。 1.0、マージン幅固定、高さ中央配置。 ...

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...

JSはじゃんけんゲームを実装します

この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...

MySQLのバッファプールの詳細な説明

MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...

Golang を使って Docker API を実際に操作する

目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...