Huigr王1. DOM与HTML的本质区别
刚入行前端时，我曾把DOM和HTML混为一谈，直到在动态表单项目中踩了坑才真正理解它们的差异。HTML是静态的标记语言，就像建筑图纸；而DOM是浏览器解析HTML后生成的动态对象模型，相当于施工中的建筑实体。当HTML文档加载时，浏览器会创建对应的DOM树，这个过程包含几个关键步骤：
- 字节流转换：浏览器将HTML原始字节转换为字符
- 令牌化：将字符流分解为HTML标签、属性和内容
- 节点构建：根据令牌创建DOM节点对象
- 树形结构：按照嵌套关系构建节点树
html复制<!-- 示例HTML -->
<div id="container">
<p class="text">Hello World</p>
</div>
对应的DOM树结构为：
- Document
- html
- body
- div#container
- p.text
- text node: "Hello World"
- p.text
- div#container
- body
- html
重要提示：DOM操作会触发浏览器的重排(reflow)和重绘(repaint)，频繁操作将严重影响性能。我在电商项目中就曾因批量修改DOM导致页面卡顿，最终通过文档片段(documentFragment)优化解决了问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. DOM操作的核心API解析
2.1 节点查询方法对比
实际开发中最常用的是这些DOM查询方法，它们各有适用场景：
| 方法 | 返回类型 | 实时性 | 适用场景 |
|---|---|---|---|
| getElementById | 单一节点 | 实时 | 精确查找唯一元素 |
| getElementsByClassName | HTMLCollection | 实时 | 按类名批量查找 |
| querySelector | 单一节点 |