[JS] DOM(Document Object Model)

4426 ワード
JavaScript DOM テキストリンク

DOM(Document Object Model)


DOM(Document Object Model)は、ドキュメントオブジェクトモデルに直接翻訳できます.
「ドキュメントオブジェクトモデル」で使用するドキュメントは、作成したhtmlファイルを指します.つまり、DOMは私たちが書いたhtmlをオブジェクト化してJavaScriptで使用します.(JavaScriptは、オブジェクト化なしでhtmlの内容を直接処理することはできません)
Webブラウザ解析htmlのために作成されたものとして表すこともできます.

構成DOM



DOMは木の形をした資料構造を持っている.
ツリー型資料構造(ノードツリー):1つの親茎から複数の枝葉を伸ばす木のような構造.ツリーを構成する各要素をノードと呼びます.
<!doctype html>
<html>
  <head>
    <title> title </title>
  </head>
  <body>
    <h1> Hello, world! </h1>
  </body>
</html>
上記のコードが記述されると、ルートノードhtmlからheadとbodyがブランチに延び、headとbodyのサブコードもサブ要素が消えるまで同様に延びる.

DOMの概念に対する誤解


1.DOMはブラウザに表示される画面ですか？


DOMとブラウザに露出している画面は違います.ブラウザでは、DOMとCSSOMの組み合わせ「レンダリングツリー」が表示されます.レンダーツリーには、画面に表示されない要素は含まれません.視覚的に確認できる要素のみから構成されます.
代表的な例としては、display:noneスタイルプロパティの要素があります.これらの要素は画面上で可視化チェックを行うことはできませんが、DOMに含まれています.
CSSオブジェクトモデル(CSS Object Model)はDOMと同様に,我々が作成したCSSはJavaScriptによって操作できる.CSSバージョンのDOMと考えられます.

2.DOMは開発者ツールのElementsラベルと同じですか?


DOMと開発者ツールの内部の内容は異なります.開発者ツールの[要素]タブには、DOMに含まれない要素が含まれています.before na::afterなどのCSSの仮想要素が例です.CSSの仮想要素はDOMではなくCSOMを構成する要素である.DOMはhtmlドキュメントのみで構成されていると考えると、混同されません.

3.DOMとHTMLは同じですか?


DOMが元のhtmlのみで構成されていると考えると、DOMとhtmlは同じと考えることができますが、事実はそうではありません.DOMとhtmlは違うかもしれません.

3.1合成HTMLドキュメントが無効な場合


作成したhtmlにエラーが発生した場合、ブラウザは自動的に修正できます.
<!DOCTYPE html>
<html>
  <body>
     <h1>DOM은 무엇일까?</h1>
  </body>
</html>
上記のコードを作成したとします.すべてのhtmlファイルはタグにタグを付ける必要がありますが、タグは欠落しています.この場合、ブラウザはhtmlファイルを使用してDOMを作成し、タグを自動的に挿入します.htmlファイル内にタグなしで単語を入力すると、ブラウザ画面に問題は発生しません.これも、ブラウザが自動的に問題を修正したためです.

3.2 JavaScriptを使用してDOMを操作します。


JavaScriptを使用すると、htmlで作成したコンテンツを変更したり、要素を追加したり削除したりするなど、さまざまなアクションを実行できます.しかし、このような動作を取っても、私たちが作成した元のhtmlファイルの内部は変更されません.元のhtml構成に基づくDOMコンテンツが変更されただけです.したがって、この場合もDOMとhtmlは異なる.
[Leet Code] N Queens II
WPFにおける依存性