幸运小姐1. DOM操作入门：前端工程师的必修课
刚入行前端那会儿，我最怕面试官问DOM操作。明明用jQuery能轻松搞定的事情，非要让我用原生JS实现。直到参与了一个需要极致性能的电商项目，才发现DOM操作远不止document.getElementById()那么简单。比如商品瀑布流布局，每滚动到临界点就要动态加载20个商品卡片，这时候如果不懂批量DOM操作和文档碎片，页面就会卡得像幻灯片。
DOM（Document Object Model）本质上就是浏览器将HTML文档解析成的树形结构。每个标签、属性、文本都是树上的节点。很多人以为DOM操作就是简单的增删改查，实际上它涉及至少三个维度的知识体系：
- 节点类型：12种Node类型中，最常用的是元素节点（1）、属性节点（2）和文本节点（3）
- 操作API：从基础的
getElementById到现代的querySelectorAll - 性能优化：重排（reflow）和重绘（repaint）的触发机制
特别提醒：在Chrome开发者工具中勾选"Paint flashing"选项，能直观看到哪些DOM操作引发了重绘，这对性能调优至关重要
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. DOM核心操作全景解析
2.1 节点选择十八般武艺
现代浏览器提供了丰富的节点选择方式，根据项目需求选择最优解：
| 选择方式 | 返回类型 | 实时性 | 适用场景 |
|---|---|---|---|
| getElementById | 单一节点 | 实时 | 精确查找唯一元素 |
| getElementsByClassName | HTMLCollection | 实时 | 按类名批量操作 |
| querySelector | 单一节点 | 静态 | CSS选择器语法查找 |
| querySelectorAll | NodeList | 静态 | 复杂条件批量选择 |
实际项目中我发现两个坑：
HTMLCollection是动态集合，循环时直接length会导致无限循环querySelectorAll在SVG命名空间下需要特别处理
javascript复制// 错误示范 - 会导致死循环
const liveItems = document.getElementsByClassName('item');
for(let i=0; i<liveItems.length; i++) {
document.body.appendChild(liveItems[i].cloneNode(true));
}
// 正确做法 - 转换为静态数组
const items = [...document.getElementsByClassName('item')];
items.forEach(item => {
document.body.appendChild(item.cloneNode(true));
});
2.2 节点操作的黑科技
创建节点时，很多新手会直接拼接HTML字符串然后innerHTML。但在安全要求高的项目中，我推荐使用document.createDocumentFragment()配合创建方法：
javascript复制const fragment = document.createDocumentFragment();
const createCard = (title, im