以下是 DOM 元素结构化关系的图示表示：

1. DOM 树形结构图

DocumentHTMLHEADBODYTITLEMETALINKDIV#headerMAINDIV#footerNAVA.homeA.aboutARTICLEH1PIMG

2. 节点类型层次结构

EventTargetNodeElementTextCommentDocumentHTMLElementSVGElementHTMLDivElementHTMLSpanElementHTMLInputElementHTMLButtonElement

3. 具体 HTML 对应的 DOM 结构

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <div id="app">
        <h1>标题</h1>
        <p>段落文本</p>
        <ul class="list">
            <li>项目1</li>
            <li>项目2</li>
        </ul>
    </div>
</body>
</html>

对应的 DOM 树：

Document
├── html
│   ├── head
│   │   └── title
│   │       └── "DOM 示例" (文本节点)
│   └── body
│       └── div#app
│           ├── h1
│           │   └── "标题" (文本节点)
│           ├── p
│           │   └── "段落文本" (文本节点)
│           └── ul.list
│               ├── li
│               │   └── "项目1" (文本节点)
│               └── li
│                   └── "项目2" (文本节点)

4. 节点关系图谱

div#apph1pul.listli:项目1li:项目2文本: 标题文本: 段落文本文本: 项目1文本: 项目2

关系说明：

  • 父节点 (parentNode)：如 ul 是 li 的父节点
  • 子节点 (childNodes)：如 div#app 有 h1, p, ul 三个子节点
  • 兄弟节点 (sibling)：如 h1 和 p 是兄弟节点
  • 文本节点 (textNode)：标签内的文本内容

5. 节点属性结构

HTMLDivElement (div#app)
├── 属性 (Attributes)
│   ├── id: "app"
│   ├── className: ""
│   └── data-*: {...}
├── 样式 (Style)
│   ├── width: "100%"
│   ├── height: "auto"
│   └── ...
├── 内容 (Content)
│   ├── childNodes: [h1, p, ul]
│   └── innerHTML: "<h1>...</ul>"
└── 位置 (Layout)
    ├── offsetTop: 0
    ├── offsetLeft: 0
    ├── clientWidth: 1200
    └── ...

6. 节点遍历方法图示

// 对应上面 HTML 结构的遍历路径
document
└── documentElement (html)
    └── body
        └── firstChild (div#app)
            ├── firstChild (h1)
            ├── nextSibling (p)
            └── lastChild (ul.list)
                ├── firstChild (li:项目1)
                └── lastChild (li:项目2)

关键概念总结

  1. 树形结构：DOM 是标准的树形数据结构
  2. 节点类型：元素节点、文本节点、属性节点等
  3. 层级关系：父子、兄弟、祖先/后代关系
  4. 继承关系：所有节点继承自 Node，元素继承自 Element

这种结构化特性使得我们可以：

  • 通过选择器精确查找元素
  • 沿着节点关系进行遍历
  • 高效地操作和更新页面内容