JavaScript DOMの詳しい操作に関する記事

著者：Eve Cole 更新時間：2022-06-27 09:58:34

この記事では、DOM とは何か、DOM ツリーとは何か、DOM の入手方法など、DOM の詳細な操作に関する関連事項を中心に紹介する、JavaScript に関する関連知識を紹介します。皆さんの参考になれば幸いです。。

DOMとは何ですか?

Document Object Model DOM、中国語:文档对象模型は、拡張可能なマークアップ言語を処理するために W3C 組織によって推奨されている标准编程接口です。

DOM ツリーとは何ですか?

DOM Treeとは、 DOMを通じてHTMLページを解析、 HTML tree树状结构と対応する访问方法生成を指します。DOM ツリーを利用すると、次の HTML コードなど、HTML ページ上の各マークアップコンテンツを直接简易操作できます

。 html><ヘッド>
    <title>ドムと遊ぶ</title></head><body>
    <p>私は dom ノードです</p>
    <p>
        <p>pp</p>
    </p></body></html>

次のように DOM ツリーに抽象化されます。
ここに画像の説明を挿入します

上記の知識を理解した上で、DOM の取得方法、DOM の作成と追加方法、DOM の削除方法の 4 つの側面から API を説明し

ます

。

DOM を取得する API はたくさんありますが、どれも非常にシンプルです。

1. ID による構文の取得

document.getElementById("id name");

例:

<body>
    <p id="p">私は p ノードです</p>
    <スクリプト>
        var p = document.getElementById("p");
        コンソール.ログ(p);
    </script></body>

ここに画像の説明を挿入します

コンソールを開くと、正常に取得できたことがわかります。

2. タグ名を通じて構文を取得します

document.getElementsByTagName("タグ名");

例:

<body>
    <p>私は p ノードです</p>
    <p>私も p ノードです</p>
    <スクリプト>
        var p = document.getElementsByTagName("p");
        コンソール.ログ(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script></body>

ここに画像の説明を挿入します

注: 指定したタグ名を持つオブジェクトのコレクションを返すには getElementsByTagName() メソッドを使用します。取得されるのはオブジェクトのコレクションであるため、内部の要素を操作したい場合は、これを使用して取得された要素オブジェクトをトラバースする必要があります。メソッドは動的です

3. クラス名を通じて構文を取得します

。

document.getElementsByClassName("class name");

例:

<body>
    <p class="p">私は p ノードです</p>
    <p class="p">私は p ノードです</p>
    <スクリプト>
        var p = document.getElementsByClassName("p");
        コンソール.ログ(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script></body>

ここに画像の説明を挿入します

これもとても簡単なので覚えておきましょう

HTML5 の新しい API を通じて

[推奨] 構文を取得します

document.querySelector("詳細については例を参照

してください");

例:

<body>
    <p class="p">私は p ノードです</p>
    <p class="name">梨の花</p>
    <p id="info">情報</p>
    <スクリプト>
        // タグ名から変数を取得 p = document.querySelector("p");
        // クラス名を通じて取得します。必ず追加してください var qname = document.querySelector(".name");
        // ID で取得します。# を忘れずに追加してください
        var info = document.querySelector("#info");
        // 一致した要素をすべて取得し、配列を返します var all = document.querySelectorAll("p");
        コンソール.ログ(p);
        console.log(qname);
        コンソール.ログ(情報);
        for (let i = 0; i < all.length; i++) {
            console.log(all[i]);
        }
    </script></body>

ここに画像の説明を挿入します

ご覧のとおり、HTML5 の新しい API の使用は非常に柔軟なので、これを使用することを非常に気に入っており、

5. 特別な要素の取得

さらに、次のような独自の取得方法を持ついくつかの特別な要素があります。 body として、html 要素は

body を取得します。要素

の構文:

document.body;

例:

<body>
    <スクリプト>
        var body = ドキュメント.ボディ;
        コンソール.ログ(本体);
    </script></body>

ここに画像の説明を挿入します
ご覧のとおり、body 要素のすべての内容が正常に取得されました。

HTML 要素を取得する

構文:

document.documentElement

例:

<body>
    <スクリプト>
        var html = ドキュメント.ドキュメント要素;
        コンソール.ログ(html);
    </script></body>

ここに画像の説明を挿入します
ご覧のとおり、Web ページ全体の HTML が取得されました。これで DOM の取得が完了しました。

簡単に言うと、

DOM の作成と追加を学びましょう。

dom の操作は、データの操作、追加、削除、変更、確認と同じであり、データの追加は、まずデータを取得してから追加することと同じです。 DOM の操作まず、DOM を作成し、それを追加する場所を指定する必要があります。最後に、DOM を作成する方法と、DOM を追加して

動的に作成する

方法を学びましょう

。心配しないでください（笑）

構文:

document.createElement("要素名");

例:
要素p動的に作成したい場合は、次のように記述できます。推論を適用する

var p = document.createElement("p");

ここには 2 つのタイプ

が

あります。 1 つは親要素の末尾に追加するもの、もう 1 つは指定した子要素の後に追加するもの

です

。

例

:

<body>
    <p>
        <a href="">百度</a>
    </p>

    <スクリプト>
        var p = document.createElement("p");
        p.innerText = "私は p"
        var p = document.querySelector("p");
        p.appendChild(p);
    </script></body>

ここに画像の説明を挿入します

要素 p の段落タグを動的に作成し、「私は p です」というテキストを記述します。最後に、p 要素を取得し、p を p の子として追加します。これにより、効果は図のようになります。

要素を指定した後に追加します

。

構文：

node.insertBefore(child, 指定された要素);

例：

<body>
    <p>
        <a href="">百度</a>
        <span>私は弟のスパンです</span>
    </p>

    <スクリプト>
        var p = document.createElement("p");
        p.innerText = "私は p"
        var p = document.querySelector("p");
        var a = document.querySelector("a");
        // p の下、a 要素の前に p を作成します。 p.insertBefore(p, a);
    </script></body>

ここに画像の説明を挿入します

これで終わりですか？はい、どう思いますか？非常に簡単ではないでしょうか。あとはもっと練習するだけです。DOM を変更する方法に進みましょう。

DOM の変更は

次のように要約されます。

ここに画像の説明を挿入します

例 1: ページの p タグを取得し、コンテンツを「Zhou Qiluo」

<body>

に変更します

    <p>
        <p></p>
    </p>

    <スクリプト>
        var p = document.querySelector("p");
        p.innerText = "周啓洛";
    </script></body>

例 2: ボタンをクリックして Baidu ハイパーリンクを生成します

<body>
    <p>
        <button onclick="createBaidu()">クリックして Baidu ハイパーリンクを生成します</button>
    </p>

    <スクリプト>
        関数 createBaidu() {
            var p = document.querySelector("p");
            var a = document.createElement("a");
            a.href = "https://www.baidu.com";
            a.innerText = "Baidu を検索すればわかります";
            p.append(a);
        }
    </script></body>

ここに画像の説明を挿入します

例 3: ボタンをクリックすると、p タグ内の文字色が緑色に変わり、犬の頭の

<body>

が手動で変更されます。

    <p>
        <button onclick="changeColor()">クリックして緑色に変わります</button>
        <p>すぐに緑色に変わります</p>
    </p>

    <スクリプト>
        関数changeColor() {
            var p = document.querySelector("p");
            p.style.color = "緑";
        }
    </script></body>

ここに画像の説明を挿入します

DOM の削除

node.removeChild

(

) メソッド

は、

DOM から子ノードを削除し、削除されたノードを返します

。
    <p>
        <button onclick="removeP()">クリックして p を削除します</button>
        <p>私は p です。もうすぐ時間が終わります</p>
    </p>

    <スクリプト>
        関数removeP() {
            var p = document.querySelector("p");
            var p = document.querySelector("p");
            p.removeChild(p); 
        }
    </script></body>

ここに画像の説明を挿入します

JavaScript DOMの詳しい操作に関する記事

DOMとは何ですか?

DOM ツリーとは何ですか?

。

1. ID による構文の取得

2. タグ名を通じて構文を取得します

3. クラス名を通じて構文を取得します

[推奨] 構文を取得します

5. 特別な要素の取得

body を取得します。 要素

HTML 要素を取得する

DOM の作成と追加を学びましょう。

動的に作成する

が

:

要素を指定した後に追加します

DOM の変更は

DOM の削除

body を取得します。要素