DOMとレイアウト木

5878 ワード
beginners webdev javascript programming テキストリンク

記事

  • How To Understand and Modify the DOM in JavaScript — Tania Rascia 100 %

  • What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado 100 %

  • DOM Tree 100 %

  • How to traverse the DOM in Javascript — Vojislav Grujić 100 %

  • Render Tree Construction — Ilya Grigorik 100 %

  • What exactly is the DOM? 同様の概念で違いを説明

    • ウィンドウオブジェクトWindow オブジェクトは、WebブラウザでJavaScriptを実行するときのグローバルOJBectです.すべてのオブジェクトはwindow オブジェクト.DOM、BOM、JavaScriptの下にありますwindow オブジェクト.


    ドキュメントオブジェクトモデル
    すべてのページコンテンツをオブジェクトとして表します.そのため、JavaScriptでアクセスしたり変更できます.document objectはページのメインエントリポイントです.

    ブラウザオブジェクトモデル
    ブラウザによって提供される追加のオブジェクトを表します.

    描画木のプロセス
  • 組み合わせDOM＆CSSOM.
  • 見えないノードを除く.
    ( <script> , <meta> , ノードdisplay: none; )
  • レイアウトComput正確な位置と各オブジェクトのサイズ.
  • ペイント画面にピクセルをレンダリングします.

    • ドム
    DOMに含まれるHTMLソースコードのすべてとノードとして表されます.
  • 要素ノード: HTMLタグ
  • テキストノード
  • コメントノード

    • 操作DOM

    方法
    メソッドは、ノードとイベントの間を接続します.
  • queryselector ()
    特定のCSSセレクタが通過した最初の要素を返します.
  • queryselector ()
    特定のCSSセレクターが渡されたすべての要素を返します.
  • creatElement ()
    新しい要素を作成します.

  • setAttributes ()
    要素の新しい属性を設定します.

    イベント
    私たちはページと対話することができます.
  • addeventlistor ()

    • トラバース
    DOMのノードを通して特定の方法を使って歩くことができます.

    一般的方法
  • 子ノード
    指定した要素の子ノードのノード名を返します.NodeListノードのライブリストですので、追加または削除する場合は、自動的に更新されます.
  • firstchild
    指定した要素の最初の子を返す
  • ノデメ
    要素の名前を返します
  • ノデベル
    テキストとコメントノードに固有の、指定されたノードの値を返します.

    • 要素指定メソッド
    以下のメソッドは、特定の状況で役に立つことができる要素ノードを考慮します.
  • 子供たち
    指定した要素の子要素ノードのノード名を返す
  • ParentNode
    指定した要素の親要素ノードを返します.これは読み取り専用プロパティです.
  • 最初の要素
    要素ノードのバージョンfirstChild
  • 最も近い
    CSSセレクタを持つ最も近い祖先要素ノードを返す

    • ドムVS ?

    ソースコード

    1 . DOMはクライアント側のJavaScriptで変更される
    document.body.style.background = "green";
    コンソールにスニペットを書き込むと、背景色が緑色に変わります.それは、DOMが変わったことを意味します.しかし、HTMLソースコードをチェックすると変更されません.ページを更新すると変更が消えます.

    2 .ブラウザがソースコードのエラーを自動的に修正
    <html>
  Hello.world!
</html>
    それはヘッド＆ボディタグを持っていないので、上記のスニペットは間違っています.しかし、DOMは自動的にこれを修正します.


    レンダリングツリー
    上で述べたように、レンダリングツリーはDOM & CSSOMの組み合わせです.また、DOMがそれを含んでいる間、視覚的に隠された要素を除外します.

    DOM VSデモンストレーション
    これらの2つは全く似ています、しかし、マイナーな違いはdevtoolがCSS擬似要素のようなDOMに加えて追加情報を含むということです.
    Android:Activityベースクラスをカスタマイズし、レイアウト/コントロールを多重化し、コントロールの重複コードを減らす、onPostOnCreate
    JavaScriptコードデイリーチャレンジ