TIL] Deep Dive-DOM(1)

15498 ワード
TIL JavaScript DOM deepdive テキストリンク

🌼 DOM

DOM은 HTML 문서의 계층적 구조와 정보를 표현は制御可能なAPI、すなわち프로퍼티와 메서드를 제공하는 트리 자료 구조であり、ツリー資料構造はノードの階層(親-子)からなり、ノード間の계층적 구조(부자, 형제 관계)를 표현하는 비선형 자료구조である.線形資料構造には,配列,スタック,キュー,ハッシュテーブルなどがある.
  • 루트 노드(root node):ツリーデータ構造の最上位ノードで、親ノードがなく、0個以上のサブノードがあります.
  • 리프 노드(leaf node):サブノードのないノードを表すときに呼び出されます.
  • 그 외:親ノード、子ノード、兄弟ノードなどがあり、これらのノードはツリー構造の階層によって異なる.

    • 🌼 39.1.2ノードオブジェクトのタイプ


    ノードのオブジェクトタイプは12種類あり、4種類が重要なノードタイプです.
  • 문서 노드:DOMツリーである최상위에 존재하는 루트 노드は、ドキュメントオブジェクトを指します.HTMLドキュメント全体のオブジェクトを指し、「グローバルオブジェクト」ウィンドウのドキュメントプロパティにバインドします.문서노드는 window.document 혹은 document로 참조할 수 있다.
  • 요소 노드:各HTML要素のノードを指します.
  • 어트리뷰트 노드:HTML 요소의 어트리뷰트를 가리키는 객체.このノードは、ドキュメント構造図で指定したHTML要素ノードにのみリンクされているため、親ノードはありません.これは、要素ノードの親ノードがツリーノードに含まれていないことを意味します요소 노드와 형제 관계는 아니다. 따라서 어트리뷰트 노드를 조작하기 위해서는 연결된 요소 노드에 먼저 접근해야 한다.
  • 텍스트 노드:HTML 요소의 텍스트를 가리키는 객체.要素ノードはドキュメントの構造を表し、テキストノードは문서의 정보를 나타낸다.テキストノードは要素ノードのサブノード텍스트 노드에 접근하기 위해서는 부모 노드인 요소 노드에 먼저 접근해야 한다.を表す.

    • 🌼 39.1.3ノードオブジェクトの継承構造


    DOMを構成するノードオブジェクトは、DOM APIを使用して独自の構造および情報を制御し、ノードオブジェクトが他のノードを参照したり、自分自身を操作したりすることができる.
    ノードオブジェクトは、ブラウザ環境で提供される他のホストオブジェクトであり、Javaスクリプトオブジェクトの一種であり、プロトタイプによって継承される構造を有する.これらの継承プロパティにより、各要素がプロトコルタイプチェーン内のすべてのプロトコルタイプのプロトコルまたはメソッドを継承して使用できます.
    ノードオブジェクトには、すべてのノードオブジェクトが共有する機能(そのタイプにかかわらず)と、ノードタイプに応じて他の固有の機能があります.共通の機能はプロトタイプチェーンの上流であり,固有の機能は下流に構築されている.
    예시 ) button property and method
  + properties: innerHTML, style, firstChild, etc.
  + method: click(), appendChild(), setAttribute(), etc.

    🌼 39.3要素ノードの取得


    要素ノードを取得する方法はいくつかありますが、通常、選択者構文を使用してノード要素を取得するのは他の方法よりも遅いです.ただし선택자를 사용하면 좀 더 구체적이고 일관된 방식으로 요소 노드를 취득할 수 있다はポイント上id 어트리뷰트가 있는 요소 노드를 취득하는 것이 아니라면 선택자을 통해 요소 노드를 취득하는 것을 권장である.
  • getElementsByTagName / getElementsByClassName:条件を満たすすべての要素を検索し、HTML Collection形式に戻ります.Document.プロトタイプと要素.プロトタイプで定義する方法はそれぞれ1つあります.

  • HTML Collectionは、類似の配列オブジェクトであり、iterableでもあります.

  • すべてのタグを取得する方法はdocumentです.getElementsByTagName(“*”).
    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
      <li>Grape</li>
    </ul>
    <ul>
      <li>html</li>
    </ul>
    <script>
      // 특정 요소 노드의 자손 노드를 탐색하여 반환할 수도 있다.
      const $fruits = document.getElementById("fruits");
      const $listFromFruits = $fruits.getElementsByTagName("li");

      console.log($listFromFruits); // HTML Collection(3) [li, li, li]
    </script>
  </body>
</html>
  • getElementById:HTMLドキュメントではid値が一意の値であり、次のキーワードで要素間の差を取得できます.ただし、重複idの入力エラーでは、条件に一致するすべての要素が検索され、条件に一致する最初の要素ノードが返されます.HTML 요소에 id를 부여하면 동일한 이름의 전역 변수가 암묵적으로 선언되고 거기에 해당 노드가 할당되는 효과あります.
    • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo"></div>
    <script>
      console.log(foo == document.getElementById("foo")); // true
    </script>
  </body>
</html>
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo"></div>
    <script>
      let foo = 1;
      
      // id와 동일한 이름의 전역 변수가 이미 선언되어 있으면 해당 변수에는 노드 객체가 재할당되지 않는다.
      console.log(foo == document.getElementById("foo")); // false
    </script>
  </body>
</html>
  • querySelector:CSSセレクタは、スタイルを指定するHTML要素を指定するときに使用される構文で、このセレクタを使用して要素ノードを返すことができます.ただし、선택자를 만족시키는 요소 노드가 여러개일 경우, 첫 번째 요소 노드만 반환.
  • querySelectorAll:パラメータとして渡されるCSS選択者모든 요소를 NodeList 형태로 반환を満たす.
    • 出典:モダンJavaScript Deep Dive-李雄模
    MSSQLストレージプロセス(長い間のメモ、思い出して)
    [LeetCode] 53. Maximum Subarray