JAvascriptカーネルシンボル33#13.DOM and Layout Trees

3786 ワード
JavaScript テキストリンク

1. DOM


ドキュメントオブジェクトモデル(DOM)は、「ドキュメントオブジェクトモデル」として解釈されます.
<html>
	<head>
  		<title>DOM</title>
	</head>
	<body>
  		DOM
	</body>
</html>
DOMは、TML、XMLドキュメントのプログラミングインターフェースである.つまり、JavaScriptなどのプログラミング言語がオブジェクトとして作成され、マークアップ言語XMLやHTMLドキュメントにアクセスするためのインタフェースが提供される.このオブジェクトモデルを使用すると、ドキュメント内のすべての要素を定義し、各要素にアクセスしてテキスト、スタイル、属性を処理できます.では、HTMLはどのようにDOMにレンダリングされているのでしょうか.
ブラウザがHTMLのレンダリングを開始すると、「グループ化」され、ブラウザが理解可能な構造に整理され、メモリにロードされます.これがDOMです.HTMLのすべての要素、テキスト、タグをオブジェクトとして作成し、ツリー構造(Layer Trees)を作成します.DOMでレンダリングされたHTMLの要素は、プログラミング言語によって動的に変更され、これらの変更の値がHTMLに反映されます.
const btn = document.queaySelector("#button");//DOM요소에 접근

btn.addEventListner("click",function(){//DOM요소에 이벤트 할당
	btn.innerHTML = "클릭되었습니다.";
})
今まで何度も見たコードJavaScript自体はHTMLで直接アクセスするものではありません!これは、DOMを操作することによってHTMLとして再表示されることを意味する.JavaScriptでアクセスしたDOMがオブジェクトとなり、JavaScriptコマンドの影響を受ける可能性があります!

2. Layout Trees


HTML DOMは、ノード(Node)と呼ばれる階層単位に情報を格納する.HTML DOMは、これらのノードを定義し、それらの関係を説明することができる.すべてのDOMオブジェクト(documentを含む)をノードと呼びます.ノードは木の形をしているので、DOMツリーまたはLayer Treeと呼ばれます.
各ノードには、メソッドとプロシージャがあります.

Layout Trees図



DOMにはいくつかの特殊な特性がある。😷

  • 新しい行とスペースは、アルファベットや数字などの有効な文字とみなされます.すなわち、ノードとして認識される.
    • タグの前にノードを作成すると、そのノードは無視されます.
  • の後ろに何かを置いても、内容は自動的に体の内部に移動します.
  • タグがない場合は、ドキュメントの上部にタグが自動的に配置されます.
  • DOM生成中、ブラウザはドキュメント内のエラー(エラーなど)と終了フラグのないエラー(エラーなど)を自動的に処理します.
  • 表にtbodyがない場合は、自動的に作成されます.
  • コメントはすべてノードとして読み取ります(htmlのすべての内容を処理できるとしましょう!)
    • I/Oバッファを使用したアルゴリズムの解
    [CONSONG]製品(filter,indexOf)の検索