DOM（文档对象模型）深度解析
DOM 是 HTML/XML 文档的树形结构表示，提供了一套让 JavaScript 动态操作网页内容、结构和样式的接口。
一、DOM 核心概念
1. 节点（Node）类型
| 类型 | 值 | 说明 | 示例 |
|---|
ELEMENT_NODE | 1 | 元素节点 | <div>, <p> |
TEXT_NODE | 3 | 文本节点 | 元素内的文字 |
COMMENT_NODE | 8 | 注释节点 | <!-- comment --> |
DOCUMENT_NODE | 9 | 文档根节点 | document |
DOCUMENT_TYPE_NODE | 10 | 文档类型声明节点 | <!DOCTYPE html> |
2. DOM 树结构
<!DOCTYPE html>
<html><head><title>DOM示例</title></head><body><h1>标题</h1><p>段落</p></body>
</html>
对应的 DOM 树：
DOCUMENT_NODE (document)├── DOCUMENT_TYPE_NODE (html)└── ELEMENT_NODE (html)├── ELEMENT_NODE (head)│ └── ELEMENT_NODE (title)│ └── TEXT_NODE ("DOM示例")└── ELEMENT_NODE (body)├── COMMENT_NODE ("主内容")├── ELEMENT_NODE (h1)│ └── TEXT_NODE ("标题")└── ELEMENT_NODE (p)└── TEXT_NODE ("段落")
二、DOM 操作 API
1. 节点查询
| 方法 | 返回内容 | 示例 |
|---|
document.getElementById() | 单个元素 | document.getElementById('app') |
document.querySelector() | 首个匹配元素 | document.querySelector('.btn') |
document.querySelectorAll() | 静态 NodeList | document.querySelectorAll('li') |
element.getElementsByTagName() | 动态 HTMLCollection | div.getElementsByTagName('p') |
2. 节点遍历
| 属性 | 说明 | 示例 |
|---|
parentNode | 父节点 | node.parentNode |
childNodes | 所有子节点 | node.childNodes |
firstChild / lastChild | 首/末子节点 | node.firstChild |
previousSibling / nextSibling | 前/后兄弟节点 | node.previousSibling |
children | 仅元素子节点 | node.children |
3. 节点修改
const newDiv = document.createElement('div');
const newText = document.createTextNode('Hello');
parent.appendChild(newDiv)
