DOM（文档对象模型）是JavaScript与HTML/XML文档交互的桥梁。掌握高效、可靠的DOM操作是构建流畅Web应用的关键。本文深入探讨从元素选取、增删改查到事件委托、性能优化等一系列最佳实践，并结合实际案例帮助你写出更专业的前端代码。无论刚入门还是进阶开发者，都能从中获得可落地的经验。
选择DOM元素的最佳实践
正确的选择器不仅能准确获取元素，还直接影响脚本性能。现代API提供了多种方式，我们需要根据场景做出明智选择。
// 最快的ID查找
const header = document.getElementById('header');
// 更灵活的querySelector (返回第一个匹配)
const nav = document.querySelector('.nav-item.active');
// 获取集合时注意缓存
const buttons = document.querySelectorAll('.btn');
// 避免在循环中重复查询DOM
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.add('processed');
}
// 在特定范围内查找，减少查找量
const container = document.getElementById('comments');
const userComments = container.querySelectorAll('.user-comment');
const header = document.getElementById('header');
// 更灵活的querySelector (返回第一个匹配)
const nav = document.querySelector('.nav-item.active');
// 获取集合时注意缓存
const buttons = document.querySelectorAll('.btn');
// 避免在循环中重复查询DOM
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.add('processed');
}
// 在特定范围内查找，减少查找量
const container = document.getElementById('comments');
const userComments = container.querySelectorAll('.user-comment');
性能对比
getElementById (最快)
querySelector (灵活)
遍历缓存 (推荐)
重复查询 (避免)
✨ 技巧：将频繁使用的元素缓存到变量，使用closest()从内向外查找。
创建与插入元素
动态生成HTML是常见需求，但innerHTML与纯DOM方法各有优劣，文档片段(DocumentFragment)是批量插入的利器。
// 使用createElement + textContent (安全高效)
const li = document.createElement('li');
li.textContent = '新项目';
list.appendChild(li);
// insertAdjacentHTML 比 innerHTML 更高效 (不会破坏已有子元素)
list.insertAdjacentHTML('beforeend', '<li>快速插入</li>');
// 文档片段：批量添加，减少重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项 ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment); // 一次追加，触发一次重排
const li = document.createElement('li');
li.textContent = '新项目';
list.appendChild(li);
// insertAdjacentHTML 比 innerHTML 更高效 (不会破坏已有子元素)
list.insertAdjacentHTML('beforeend', '<li>快速插入</li>');
// 文档片段：批量添加，减少重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `项 ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment); // 一次追加，触发一次重排
<ul id="list">
<li>传统方式</li>
<li>批量插入</li>
文档片段 (不可见容器)
📌 文档片段不会占用真实DOM树，插入后展开为子节点。
修改属性与样式
操作class、样式和自定义属性应使用现代API，避免直接操作内联样式字符串。
// 使用classList增删class
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('expanded');
// 批量设置样式 (推荐使用class切换，而非style对象)
element.style.cssText = 'display:block; color:red;'; // 覆盖原有
// 数据属性 dataset
div.dataset.userId = '123'; // 对应 data-user-id
const id = div.dataset.userId;
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('expanded');
// 批量设置样式 (推荐使用class切换，而非style对象)
element.style.cssText = 'display:block; color:red;'; // 覆盖原有
// 数据属性 dataset
div.dataset.userId = '123'; // 对应 data-user-id
const id = div.dataset.userId;
✅ classList 方法兼容性好且比 className 更安全。
删除与替换元素
现代浏览器提供了更直观的remove()方法，但也要注意内存泄漏问题。
// 传统删除方式
parent.removeChild(child);
// 现代方式 (IE不支持)
child.remove();
// 替换元素
parent.replaceChild(newChild, oldChild);
// 清空容器 (高效)
container.innerHTML = ''; // 简单但可能内存泄漏(若有事件绑定)
while (container.firstChild) { // 安全且快速
container.firstChild.remove();
}
parent.removeChild(child);
// 现代方式 (IE不支持)
child.remove();
// 替换元素
parent.replaceChild(newChild, oldChild);
// 清空容器 (高效)
container.innerHTML = ''; // 简单但可能内存泄漏(若有事件绑定)
while (container.firstChild) { // 安全且快速
container.firstChild.remove();
}
⚠️ 删除元素时需考虑：
- 移除事件监听 (解绑)
- 避免闭包引用导致内存无法释放
- 使用
remove()或innerHTML = ''取决于场景
事件处理最佳实践
事件委托利用事件冒泡，减少监听器数量，提升性能并支持动态元素。
// 事件委托示例
document.querySelector('#list').addEventListener('click', (e) => {
const target = e.target.closest('li'); // 确保点击的是li
if (!target) return;
console.log('点击了', target.textContent);
});
// 可访问性: 不要移除键盘事件
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); /* 执行操作 */ }
});
// 移除事件监听避免内存泄漏
signal.addEventListener('abort', () => {
element.removeEventListener('click', handler);
}); // 或在现代浏览器使用AbortController
document.querySelector('#list').addEventListener('click', (e) => {
const target = e.target.closest('li'); // 确保点击的是li
if (!target) return;
console.log('点击了', target.textContent);
});
// 可访问性: 不要移除键盘事件
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); /* 执行操作 */ }
});
// 移除事件监听避免内存泄漏
signal.addEventListener('abort', () => {
element.removeEventListener('click', handler);
}); // 或在现代浏览器使用AbortController
列表项1
列表项2
列表项3
✨ 用父级一个监听器管理所有子项点击，即使新增子项也无需重新绑定。
性能优化深度解析
重排(reflow)和重绘(repaint)是性能杀手，批量操作、离线处理可大幅提升性能。
// 批量修改样式 (避免多次重排)
const el = document.getElementById('box');
el.style.cssText = 'width:100px; height:100px; background:blue;';
// 使用class代替style
el.classList.add('box-themed');
// 离线操作：先克隆再替换
const clone = original.cloneNode(true);
// 对clone进行多次修改
original.parentNode.replaceChild(clone, original);
// 使用requestAnimationFrame读写分离
requestAnimationFrame(() => {
element.style.left = newLeft + 'px';
});
const el = document.getElementById('box');
el.style.cssText = 'width:100px; height:100px; background:blue;';
// 使用class代替style
el.classList.add('box-themed');
// 离线操作：先克隆再替换
const clone = original.cloneNode(true);
// 对clone进行多次修改
original.parentNode.replaceChild(clone, original);
// 使用requestAnimationFrame读写分离
requestAnimationFrame(() => {
element.style.left = newLeft + 'px';
});
⚡ 优化清单
- ✅ 缓存布局信息 (避免强制同步布局)
- ✅ 批量DOM写入 (文档片段)
- ✅ 对复杂动画使用 transform/opacity
- ✅ 考虑使用虚拟滚动代替大量DOM
实际案例：构建动态待办列表
综合运用上述技术，实现一个高性能的待办管理组件（添加、删除、标记完成）。
// 使用文档片段批量添加初始任务
function renderTodos(todos) {
const fragment = document.createDocumentFragment();
todos.forEach(todo => {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `<input type="checkbox" ${todo.done ? 'checked' : ''}> ${todo.text}`;
fragment.appendChild(li);
});
list.appendChild(fragment);
}
// 事件委托处理点击和删除
list.addEventListener('click', (e) => {
if (e.target.matches('.delete-btn')) {
e.target.closest('li').remove();
}
});
function renderTodos(todos) {
const fragment = document.createDocumentFragment();
todos.forEach(todo => {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `<input type="checkbox" ${todo.done ? 'checked' : ''}> ${todo.text}`;
fragment.appendChild(li);
});
list.appendChild(fragment);
}
// 事件委托处理点击和删除
list.addEventListener('click', (e) => {
if (e.target.matches('.delete-btn')) {
e.target.closest('li').remove();
}
});
- 学习DOM操作 ✖
- 掌握事件委托 ✖
✅ 采用文档片段初始渲染，点击✖通过事件委托删除
更多细节：处理动态添加的元素时，无需重新绑定监听器；配合AbortController可以优雅移除监听，防止内存泄漏。
可访问性与防御性编程
不要忘记ARIA属性和错误边界，确保DOM操作不会破坏页面可用性。
// 动态添加内容时同步ARIA
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.textContent = '已添加新项目';
// 确保元素存在再操作
const maybeEl = document.querySelector('.optional');
if (maybeEl) { maybeEl.classList.add('exist'); }
// 尊重用户减少动画的偏好
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
element.style.transition = 'none';
}
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.textContent = '已添加新项目';
// 确保元素存在再操作
const maybeEl = document.querySelector('.optional');
if (maybeEl) { maybeEl.classList.add('exist'); }
// 尊重用户减少动画的偏好
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
element.style.transition = 'none';
}
张玥
资深前端工程师，专注于现代Web开发技术，CSS Grid布局专家，热爱分享前端开发技巧和最佳实践。