DOMとは

DOMツリーは、HTMLドキュメントを表現するツリー構造です。木のように、各要素が枝分かれして繋がっています。

HTMLドキュメントの構造を理解しやすい: 視覚的に分かりやすく、ドキュメント全体の構成を把握しやすくなります。
要素へのアクセス・操作が容易: JavaScriptで特定の要素を操作したり、スタイルを変更したりする際に役立ちます。

サンプルコード

<html>
  <head>
    <title>DOMツリーの例</title>
  </head>
  <body>
    <h1>タイトル</h1>
    <p>本文です</p>
    <ul>
      <li>項目1</li>
      <li>項目2</li>
    </ul>
  </body>
</html>

Document
  |- HTML
    |- Head
      |- Title
    |- Body
      |- H1
      |- P
      |- Ul
        |- Li
        |- Li

関係	説明
Document	DocumentノードはDOMツリーのルート要素であり、すべての要素の親要素となります。
HTML	HTML要素はDocumentノードの子要素であり、Webページ全体の構造を定義します。
Head	Head要素はHTML要素の子要素であり、メタデータやスタイルシートなどの情報を格納します。
Title	Title要素はHead要素の子要素であり、Webページのタイトルを表示します。
Body	Body要素はHTML要素の子要素であり、Webページのコンテンツを表示します。
H1	H1要素はBody要素の子要素であり、Webページの見出しレベル1を表示します。
P	P要素はBody要素の子要素であり、段落を表示します。
Ul	Ul要素はBody要素の子要素であり、箇条書きリストを表示します。
Li	Li要素はUl要素の子要素であり、箇条書きリストの各項目を表示します。
Siblings(従兄弟)	同じ親要素を持つ要素同士を兄弟要素と呼びます。例えば、Body要素の子要素であるH1、P、Ulは兄弟要素となります。
Descendants(子孫)	ある要素の子要素とその子要素の子要素…というように、すべての後継要素をdescendantsと呼びます。例えば、H1要素の子要素であるP要素は、H1要素のdescendantsとなります。
Ancestors(先祖)	ある要素の親要素とその親要素の親要素…というように、すべての先祖要素をancestorsと呼びます。例えば、Li要素の親要素であるUl要素、Ul要素の親要素であるBody要素は、Li要素のancestorsとなります。

参考

DOM について
https://tcd-theme.com/2021/05/javascript-dom.html

Tree 構造について
https://ja.wikipedia.org/wiki/%E6%9C%A8%E6%A7%8B%E9%80%A0_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0)

発音記号

English pronunciation of descendant

How to pronounce descendant
UK/dɪˈsen.dənt/
US/dɪˈsen.dənt/