220318 React DOM


⭐ React ⭐


1.文書オブジェクトモデル(DOM)

  • 「Documentオブジェクトモデル」略語
  • HTMLドキュメントの要素はアクセスしやすい.
    階層インタフェース
  • HTMLユニット(要素)を対象としたモデル
  • テキストはオブジェクトであってもよく、ボタンやタグなどの要素はオブジェクトであってもよい.
  • <body>
      <h1>오늘 할 일</h1>
      <div>
        <h3>리액트 강의 1주차 듣기</h3>
        <p>리액트 강의 다 듣기</p>
        <button>완료</button>
      </div>
    </body>
  • 上記コードにおいて、divは、h 3、pおよびbtnタグ
  • を含む
  • divタグを子要素と呼ぶ親要素
  • divのタグをdivタグと呼ぶサブエレメント
  • divとサブラベルの関係を「親子関係」と呼ぶ
  • サブラベル、すなわちh 2、p、btnの関係を「兄弟関係」と呼ぶ
  • divはbodyにも含まれる.
    これを描けばこうなります
  • これを「ストリップ」と呼ぶ
  • すなわちDOMは構造化文書を表す形式であり,その形式は「ツリー構造」である.

  • DOMツリーのチェック方法は、
  • ブラウザを開き、開発者ツールを開ければよい.
  • ウィンドウは[Ctrl+Shift+i/F 12]
  • macは[Cmd+Opt+i]
  • クリック開発者ツール
  • //console창에서 확인이 가능하다
    // 현재 dom 트리를 볼 수 있다
    document
    // dom 트리 중, body의 내용을 확인한다
    document.body
    // dom 트리 중, head의 내용을 확인한다
    document.head
  • 詳細は、本書で参照してください.
  • https://developer.mozilla.org/ko/docs/Web/API/Document