DOMって何?

4228 ワード
DOM テキストリンク
DOMを理解する前に,Webページの構築過程を理解することは容易に理解できる.

Webページの表示プロセス


ブラウザがサーバからページのHTML応答を受信すると、次の手順に従います.
Webブラウザは、元のHTMLドキュメントを読み込みます.
スタイルを設定し、インタラクティブなページを作成してビューポートに表示します.
このプロセスは、緊急レンダリングパス、CPRと呼ばれる.

CRPの6つのプロセス


構築
  • DOMツリー
  • CSSOMツリー構築
    • 運転
  • JS
  • レンダリングツリー構築
    • 作成
  • レイアウト
  • 彩画

    • レンダーツリー(Render Tree)


    [レンダリングツリー](Rendering Tree)は、Webページに表示されるHTML要素に関連するスタイル要素からなります.ブラウザでは、上の図に示すようにレンダリングツリーを作成するには、2つのモデルが必要です.
    DOM:HTML要素の構造表示
    CSSOM:関連スタイル情報の構造化表示

    DOMとは?


    DOMは、ドキュメントオブジェクトモデル(Document Object Model)の略であり、HTML、XMLドキュメントのプログラミングインターフェース(インタラクション)である.DOMオブジェクト構造はノードツリーで表される.


    基本的にHTMLの構造に従い、Treeとして表す.
    一番上に見えるラベル<html>は一番上と考えられますが、熱を見ると<!doctype html>を含むdocumentオブジェクトが上にあります.ドキュメント全体を名前で表し、各ラベルはオブジェクトです.

    DOMとHTMLは違います


    ブラウザがHTMLを変更するとき


    ブラウザでは、HTMLの作成中に必要なタグを省略するエラーが発生します.例えば、HTML作成時に<table>で<tbody>が使用され、<tr>が使用されなかった場合、開発者ツールから見て、未作成の<tbody>が存在する.<tbody>はDOMにあるはずです.
    したがってCSS、JSで検索したり、スタイルを変更したり、操作したりすることができます.

    JSでDOMを操作する場合


    JSは、ブラウザが読み取り、使用する言語です.しかしDOMはそのことが起こった場所であり、正確にはJSのことをDOM APIと考えている.もちろんノードです.jsのようにブラウザ以外でも完全に利用できます.
    たとえば、
    <div id=“cake”></div>
    Cakeという名前のタグには、以下のようにテキストを追加するJSを記述します.
    <script>
  const cake = document.getElementById(“cake”);
  cake.innerHTML = “cake is delicious!”;
</script>
    開発者ツールでDOMを確認すると、次のように変更されます.
    <div id=“cake”>cake is delicious</div>

    n/a.結論


    JSは構文、言語であり、DOM APIのないブラウザ以外で使用可能(node.js)
    DOMはブラウザで動作し、存在する.
    DOMはブロック化されたHTMLと言える.
    Webページがロードされると、ブラウザはDOMページを作成します.
    ブラウザにDOMが存在し、HTMLドキュメントを解析してDOMを生成します.
    DOMとは?
    DOMとは?DOM TREE? DOM API? - クリーニングDOM
    Understanding the Critical Rendering Path
    Variable Types
    泡の開始泡の位置合わせ