ホームページ » コーディング » 詳細なドキュメントオブジェクトモデル(DOM)について

    詳細なドキュメントオブジェクトモデル(DOM)について

    私達は皆のことを聞いたことがある DOM, または 文書オブジェクトモデル, JavaScriptに関連して、それは時々言及されます。 DOMはWeb開発において非常に重要な概念です。それがなければ、私たちはできないでしょう HTMLページを動的に変更する ブラウザで.

    DOMを学び理解することは、 アクセス、変更、および監視 HTMLページのさまざまな要素文書オブジェクトモデルも役に立つかもしれません スクリプト実行時間の不必要な増加を減らします.

    データ構造ツリー

    DOMとは何か、DOMがどのように存在するのか、どのように存在するのか、そして内部で何が起こるのかを説明する前に、ツリーについて知っていただきたいと思います。針葉樹&落葉樹ではなく、約について データ構造ツリー.

    定義を単純化すれば、データ構造の概念を理解するのがはるかに簡単になります。私は言うだろう、データ構造は約です データを整理する. そうです、あなたの家の家具や本棚の中の本、あるいは食事のために持っているいろいろな種類の食べ物のグループを整理するのですから あなたにとって意味のあるものにする.

    もちろん、データ構造にすべてがあるわけではありませんが、すべてが始まるところがほとんどです。この “配置” それがすべての核心です。 DOMでも同様に重要です。しかし、DOMについてはまだ話していません。 あなたが精通しているかもしれないデータ構造:配列.

    配列と木

    配列は持っています 指標 そして 長さ, 彼らはすることができます 多次元, そしてもっとたくさんの特徴があります。配列についてこれらのことを知っておくことが重要なので、今は気にしないでください。私たちにとって、配列はとても単純です。それはあなたの時です 異なるものを一列に並べる.

    同様に、木について考えるとき、例えば、それは約です 上下に物を置く, 一番上の1つだけから始めます.

    今、あなたは前から単線アヒルを取るかもしれません, 直立させる, それを教えて “今、すべてのアヒルは別のアヒルの下にいます”. それは木ですか?それは.

    データの内容や使用方法に応じて、ツリーの最上位のデータ( ルート)あるかもしれません 非常に重要 またはそこにしかない何か その下に他の要素を入れる.

    いずれにせよ、ツリーデータ構造の一番上の要素は非常に重要なことをします。それは場所を提供します ツリーから抽出したい情報を探し始めます。.

    DOMの意味

    DOMはの略 文書オブジェクトモデル. ドキュメント HTML(XML)文書を指す どちらですか オブジェクトとして表現. (JavaScriptでは、すべてをオブジェクトとして表現することしかできません。)

    モデルは ブラウザによって作成された これはHTMLドキュメントを受け取り、それを表すオブジェクトを作成します。このオブジェクトにはJavaScriptでアクセスできます。そしてこのオブジェクトを使ってHTMLドキュメントを操作し、そして私たち自身のアプリケーションを構築します。, DOMは基本的に API.

    DOMツリー

    JavaScriptコードでは、HTMLドキュメントは オブジェクトとして表現. その文書から読み取られるすべてのデータは オブジェクトとしても保存, お互いの下に入れ子になっています(前述したように、JavaScriptではすべてがオブジェクトとしてしか表現できないため)。.

    つまり、これは基本的にコード内のDOMデータの物理的な配置です。 オブジェクトとして配置. 論理的には, 木です.

    DOMパーサー

    すべてのブラウザソフトウェアには、というプログラムがあります。 DOMパーサー それは責任があります HTMLドキュメントをDOMにパースする.

    ブラウザはHTMLページを読み取り、そのデータをDOMを構成するオブジェクトに変換します。これらのJavaScript DOMオブジェクトに存在する情報は、DOMツリーと呼ばれるデータ構造ツリーとして論理的に配置されています。.

    HTMLからDOMツリーへのデータの解析

    単純なHTMLファイルを取ります。それは持っています ルート要素 . その サブ要素 あります そして , それぞれが自分自身の多くの子要素を持っています.

    だから本質的には、ブラウザ HTML文書のデータを読み取る, これに似たもの:

           

    そして, それらをDOMツリーに配置します。 このような:

    DOMツリー内の各HTML要素(およびその所属コンテンツ)の表現は、 ノード. の ルートノード のノード .

    DOMインターフェース JavaScriptで呼ばれています 資料 (それはHTMLドキュメントの表現だからです)。したがって、HTML文書のDOMツリーにアクセスします。 を通って 資料 インタフェース JavaScriptで.

    私たちはアクセスするだけではありませんが HTML文書を操作する DOMを通して。 Webページに要素を追加したり、削除したり更新したりできます。 DOMツリーのノードを変更または更新するたびに、 Webページに反映.

    ノードの設計方法

    HTMLドキュメントのすべてのデータは、 JavaScriptのオブジェクトとして保存. つまり、オブジェクトとして保存されたデータをツリーとして論理的に配置する方法?

    DOMツリーのノードには特定の特性またはプロパティがあります。ツリー内のほぼすべてのノード 親ノードを持つ (真上のノード), 子ノード (その下のノード)そして きょうだい (同じ親に属する他のノード)。これを持っている 家族 ノードの上、下、周りには、ノードとしての資格があります。 木の一部.

    すべてのノードのこのファミリー情報は そのノードを表すオブジェクトにプロパティとして保存されます。. 例えば, 子供 そのノードの子要素のリストを保持するノードのプロパティで、その子要素をノードの下に論理的に配置します。.

    DOM操作をやり過ぎないようにする

    (Webページを変更するために)DOMを更新すると便利な場合がありますが、そのようなことがあります。 やり過ぎ.

    たとえば、あなたはの色を更新したいとします

    JavaScriptを使用してWebページに。あなたがする必要があるのは 対応するDOMノードオブジェクトにアクセスする colorプロパティを更新します。これは、ツリーの他の部分(ツリー内の他のノード)には影響しません。.

    しかし、あなたがしたい場合はどうなります ツリーからノードを削除する または それに1を加えなさい? 木全体 再配置する必要があるかもしれません, ノードをツリーから削除または追加します。これは費用のかかる仕事です。この仕事をやり遂げるには時間とブラウザのリソースが必要です.

    例えば、あなたがしたいとしましょう。 テーブルに5行追加する. 行ごとに、新しいノードが作成されてDOMに追加されると、 ツリーは毎回更新されます, 合計で最大5つのアップデートを追加.

    これを回避するには、 DocumentFragment インタフェース。それを可能な箱と考えてください 5行すべてを保持 そして木に加えられる。このようにして5行は 1つのデータとして追加 1つずつではなく、ツリー内で1つの更新のみが行われます。.

    これは要素を削除または追加したときだけではなく、 要素のサイズ変更 サイズ変更された要素がその周囲に他の要素を必要とする場合があるため、他のノードにも影響を与える可能性があります。 サイズを調整する. そのため、他のすべての要素の対応するノードを更新する必要があり、HTML要素は新しい規則に従って再度レンダリングされます。.

    同様に、Webページ全体のレイアウトに影響がある場合, Webページの一部または全部が再レンダリングされる可能性があります。. これはプロセスとして知られています リフロー. のために 過度のリフローを避ける DOMをあまり変更しないようにしてください。 WebページでReflowを引き起こす可能性があるのは、DOMへの変更だけではありません。ブラウザによっては、他の要因も影響します。.

    まとめ

    まとめると、DOMは 木として可視化 HTML文書にあるすべての要素で構成されています。物理的に(デジタルが取得できるものと同じくらい物理的に)、それは 入れ子になったJavaScriptオブジェクトのセット それを可能にする情報を保持しているプロパティとメソッド 論理的にそれらを木に並べる.