220318 React DOM

3234 ワード

React 航海 TIL テキストリンク

⭐ React ⭐

「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ツリーのチェック方法は、

ブラウザを開き、開発者ツールを開ければよい.

ウィンドウは[Ctrl+Shift+i/F 12]

macは[Cmd+Opt+i]

クリック開発者ツール

//console창에서 확인이 가능하다
// 현재 dom 트리를 볼 수 있다
document
// dom 트리 중, body의 내용을 확인한다
document.body
// dom 트리 중, head의 내용을 확인한다
document.head

詳細は、本書で参照してください.

この問題について(220318 React DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@nulee1000/220318-React-1

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol