JavaScript での DOM コア操作に関する簡単な説明-jsチュートリアル-php.cn

JavaScript での DOM コア操作に関する簡単な説明

青灯夜游

リリース： 2019-11-30 17:21:02

転載

2421 人が閲覧しました

ドキュメントオブジェクトモデル (DOM) は、拡張可能なマークアップ言語 (HTML または XML) を処理するために W3C 組織によって推奨されている標準プログラミングインターフェイスです。

JavaScript での DOM コア操作に関する簡単な説明

W3C は、Web ページのコンテンツ、構造、スタイルを変更できる一連の DOM インターフェイスを定義しました。

1. JavaScript の場合、JavaScript が HTML を操作できるようにするために、JavaScript には独自の DOM プログラミングインターフェイスがあります。

2. HTML の場合, DOM は、ドキュメント、要素、ノードを含む HTML を DOM ツリー形式にします。

Document: ページ全体がドキュメントです;

Element: ページ内のすべてのタグは要素と呼ばれます;

ノード: ページ上のすべてのコンテンツはノードです。ドキュメントノード(文書オブジェクト)、要素ノード(要素オブジェクト)、属性ノード(属性オブジェクト)、テキストノード(テキストオブジェクト) 、コメントノード(コメントオブジェクト)、コード間の改行もノードです。

取得したすべての DOM 要素はオブジェクトです。

DOM 操作では、主に要素に焦点を当てます操作は主に作成、追加、削除、変更、確認、属性操作、およびイベント操作が含まれます。

の作成には主に 3 つのタイプがあります。

1. document.write

機能: ページのドキュメントフローが読み込まれる (つまり、すべてのコードが実行される) 場合、この文を再度呼び出すと、ページが再描画されます。 (つまり、新しい HTML ページが作成され、以前に書いた内容はすべて失われます)。 (めったに使用されません)

2. innerHTML: DOM ノードにコンテンツを書き込むと、ページ全体が再描画されません。

3. createElement: ページが再描画されることはありません。

InnerHTML と createElement の効率比較:

①innerHTML スプライシング効率テスト:

<script>
    function fn() {
        var d1 = +new Date();

        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += &#39;<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

ログイン後にコピー

#実行結果は以下の通り

#実行速度は約1600ミリ秒

②createElement効率テスト

<script>
    function fn() {
        var d1 = +new Date();

        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

ログイン後にコピー

実行結果は以下の通りです

执行速度为十几秒

③innerHTML数组效率测试

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push(&#39;<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

ログイン後にコピー

执行结果如下