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(".movies");
            コンソールログ("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(".movies > 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(".movies > 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に対応する属性はfontSize 、 background-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 をよろしくお願いいたします。

以下もご興味があるかもしれません: