ブログcapicat+DOMコンセプト

6225 ワード
大邱AI学校 テキストリンク

🐳学習内容


ネイバーのブログを真似した実習をしました.レイアウトを分析したり、箱を作って並べたり、大きさや高さを調整したりします.繰り返しの内容なのでここまで…今日はDOMを勉強します.

🐟DOM


DOMとは?


Documentオブジェクトモデル、DOM、ドキュメントオブジェクトモデルはHTML、XMLドキュメントのプログラミングインターフェースである.DOMはドキュメントの構造化表現を提供し、プログラミング言語がDOM構造にアクセスする方法を提供し、ドキュメント構造、スタイル、コンテンツなどを変更するのに役立ちます.DOMは、構造化ノードと属性とメソッドを持つオブジェクトを使用してドキュメントを表します.Webページをスクリプトまたはプログラミング言語にリンクする責任を負います.
DOMは、同じドキュメントを表現、記憶、および操作する方法を提供する.DOMはWebページのオブジェクト向け表示であり、JavaScriptなどのスクリプト言語でDOMを変更できます.
API (web or XML page) = DOM + JS (scripting language)

DOMへのアクセス方法

  • windowオブジェクトからのalert()関数
    • を使用
    <body onload="window.alert('welcome to my home page!');">
  • JavaScriptは、ドキュメントをロードするとき(すべてのDOMが使用可能な場合)に実行する関数を定義します.この関数は、新しいH 1要素を作成し、要素にテキストを追加し、ドキュメントのツリーにH 1を追加します.
    • <html>
  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

    データ型

  • document:ルートdocumentオブジェクト自体.
  • 要素:DOM APIのメンバーによって返される要素または要素タイプのノードを指します.
  • nodeList:要素の配列.indexでアクセスできます.
  • list.item(1)
  • list[1]
  • attribute:attributesはDOMの要素と同じノードです.
  • namedNodeMap:arrayと同様ですが、itemsはnameまたはindexでアクセスできます.リストには特別なソートはなく、列挙時に主にindexが使用されます.namedNodeMapにはitem()メソッドがあり、namedNodeMapでitemを追加または削除できます.
    • Windowsオブジェクトはブラウザと同様,documentオブジェクトはルートドキュメントそのものといえる.
    DOMはドキュメントを論理ツリーとして表します.ツリー内の各ブランチはノードで終了し、各ノードにオブジェクトがあります.DOMメソッドでは、ツリーへのプログラミングアクセスが可能になります.これにより、ドキュメントの構造、スタイル、および内容を変更できます.

    +レンダリングブラウザ


    Critical Rendering Path



    1. HTML parshing -> DOM Tree/CSS -> CSSOM
    2. DOM Tree + CSSOM -> Render Tree
    Render Treeは、DOM Treeで実際に見られる部分のみから構成される.
    3. Layout
    4. Paint

    DOM RE-Render


    DOMを変更するとDOMが変更され、DOMの変更からRender Tree、Layout、paintの変更になります.
    Reactの仮想DOMの場合、これらのレンダリングを実際のDOMに適用する前に、仮想DOMにすべて描画し、実際のDOMに移動して演算量を減らし、パフォーマンスを向上させます.
    https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
    https://poiemaweb.com/js-dom
    https://isme2n.github.io/devlog/2017/07/06/browser-rendering/
    https://velopert.com/3236

    🦐学習後期


    暑い暑い暑い
    DOM、ブラウザレンダリング.DOMが他の言語と一緒に使えるのは本当に不思議で、今度は活動に関する資料を探します.
    dockerコンテナ名の指定
    テストエンコーディング|(JavaScript)プログラマー:文字列内で任意にソート