DOM の使用に関する概要

今回は DOM を使用する際の 注意事項 についてまとめてみました。実際の事例を見てみましょう。

DOM は、HTML および XML ドキュメントにアクセスするための言語に依存しない API です。 DOM1 レベルでは、HTML ドキュメントと XML ドキュメントが交互に配置されたノード ツリーとして視覚化され、JavaScript を使用してこの数のノードを操作し、ディーテン ドキュメントの外観と構造を変更できます。
DOM はさまざまなノードで構成されており、簡単にまとめると次のとおりです。

最も基本的なノード タイプは、ドキュメントの独立した部分を抽象的に表すために使用されます。

.Document タイプは、一連の階層ノードのルート ノードであるドキュメント全体を表します。 JavaScript では、ドキュメント オブジェクトは Document のインスタンスです。ドキュメント オブジェクトを使用してノードをクエリおよび取得する方法は数多くあります。まず、var hetml=document.documentElement;//HTML への参照を取得するなど、ドキュメントの子ノードを取得できます。 2 つ目は、ドキュメント情報を取得できることです。例: varoriginal=document.tittle; document.tittle=”新しいタイトル”;//ドキュメントのタイトルを設定します。 3 番目は、getElementById() や getElementByName() などの要素を検索することです。

Element ノードは、html および xml に関連するすべての要素を表し、これらの要素のコンテンツと属性を操作するために使用できます。

ノードタイプもいくつかあり、それぞれ文書コンテンツ (text)、コメント (comment)、文書タイプ (Documenttype)、CDATA 領域 (CDATAsection)、および文書フラグメントを表します。

DOM へのアクセス操作は多くの場合直感的ですが、スクリプト要素とスタイル要素を処理する場合には依然としていくつかの問題が発生します。これらの 2 つの要素にはスクリプト情報とスタイル情報が含まれるため、通常、ブラウザーはそれらを別々に扱います。

DOM を理解するための鍵は、DOM がパフォーマンスに与える影響を理解することです。DOM は JavaScript のプログラムの中で最も負荷が高い部分であり、Nodelist へのアクセスには多くの問題が発生するため、NdeList オブジェクトは動的であるため、最も問題が発生します。これは、NodeList オブジェクトにアクセスするたびにクエリを実行する必要があることを意味します。これを考慮すると、DOM 操作を減らすのが最善の方法です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js 設計パターン - シングルトン パターンの使用

フロントエンドでモジュール性を使用する必要があるのはなぜですか?

以上がDOM の使用に関する概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。