詳細なドキュメントオブジェクトモデル（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を更新すると便利な場合がありますが、そのようなことがあります。 やり過ぎ.

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