Dreamer寻1. JavaScript DOM操作的核心概念
DOM（Document Object Model）是JavaScript与网页交互的基础接口。简单来说，DOM将HTML文档表示为节点树，每个HTML元素都是一个节点，JavaScript可以通过操作这些节点来动态改变网页内容。
DOM操作的核心在于理解节点关系。一个典型的DOM树结构如下：
code复制document
├── html
│ ├── head
│ │ ├── title
│ │ └── meta
│ └── body
│ ├── div
│ │ ├── h1
│ │ └── p
│ └── script
1.1 为什么DOM操作如此重要
DOM操作是前端开发中最频繁使用的技术之一。根据2023年Stack Overflow开发者调查，超过78%的前端开发者每天都会进行DOM操作。主要原因包括：
- 动态更新页面内容而无需刷新
- 响应用户交互（点击、滚动等）
- 创建单页应用(SPA)的核心技术
- 与CSS结合实现动画效果
提示：现代前端框架如React、Vue虽然提供了虚拟DOM，但底层仍然依赖原生DOM操作，理解原生DOM对框架学习大有裨益。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 基础DOM操作方法
2.1 获取DOM元素
获取元素是DOM操作的第一步，常用方法有：
javascript复制// 通过ID获取（返回单个元素）
const header = document.getElementById('header');
// 通过类名获取（返回HTMLCollection）
const items = document.getElementsByClassName('item');
// 通过标签名获取（返回HTMLCollection）
const divs = document.getElementsByTagName('div');
// 通过CSS选择器获取（返回第一个匹配元素）
const main = document.querySelector('.main');
// 通过CSS选择器获取所有匹配元素（返回NodeList）
const buttons = document.querySelectorAll('button');
2.2 创建和添加元素
javascript复制// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = '我是新创建的div';
// 添加到文档中
document.body.appendChild(newDiv);
// 在特定位置插入
const referenceElement = document.querySelector('#reference');
document.body.insertBefore(newDiv, referenceElement);
2.3 修改元素属性和内容
javascript复制// 修改文本内容
element.textContent = '新文本';
// 修改HTML内容（注意XSS风险）
element.innerHTML = '<strong>加粗文本</strong>';
// 修改属性
element.setAttribute('id', 'newId');
element.className = 'new-class'; // 替换所有类
element.classList.add('additional-class'); // 添加类
element.classList.remove('old-class'); // 移除类
3. 高级DOM操作技巧
3.1 事件处理
事件处理是DOM交互的核心。现代JavaScript推荐使用addEventListener：
javascript复制const button = document.querySelector('#myButton');
// 添加点击事件
button.addEventListener('click', function(event) {
console.log('按钮被点击了', event);
});
// 事件委托（处理动态添加的元素）
document.body.addEventListener('click', function(event) {
if(event.target.classList.contains('dynamic-item')) {
console.log('动态元素被点击');
}
});
3.2 性能优化技巧
DOM操作通常是性能瓶颈，优化建议：
- 批量操作：使用文档片段减少重绘
javascript复制const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
const div = document.createElement('div');
fragment.appendChild(div);
}
document.body.appendChild(fragment);
- 避免强制同步布局（Layout Thrashing）
javascript复制// 不好 - 导致多次重排
const div1 = document.getElementById('div1');
div1.style.width = '100px';
const div2 = document.getElementById('div2');
div2.style.height = div1.offsetWidth + 'px';
// 好 - 先读取后写入
const width = div1.offsetWidth;
div1.style.width = '100px';
div2.style.height = width + 'px';
- 使用虚拟滚动处理长列表：只渲染可视区域内的DOM元素
3.3 现代DOM API
- MutationObserver：监听DOM变化
javascript复制const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('DOM发生了变化', mutation);
});
});
observer.observe(document.body, {
childList: true,
attributes: true,
subtree: true
});
- IntersectionObserver：检测元素可见性
javascript复制const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if(entry.isIntersecting) {
console.log('元素进入视口', entry.target);
}
});
});
observer.observe(document.querySelector('.lazy-load'));
4. 常见问题与解决方案
4.1 动态元素的事件绑定
问题：通过JavaScript动态添加的元素无法响应之前绑定的事件。
解决方案：使用事件委托，将事件绑定到父元素：
javascript复制document.getElementById('parent').addEventListener('click', function(event) {
if(event.target.matches('.dynamic-item')) {
// 处理动态元素的点击
}
});
4.2 内存泄漏
问题：未正确移除事件监听器可能导致内存泄漏。
解决方案：
javascript复制function handleClick() {
console.log('点击');
}
// 添加监听
element.addEventListener('click', handleClick);
// 移除监听（确保使用相同的函数引用）
element.removeEventListener('click', handleClick);
4.3 跨浏览器兼容性
虽然现代浏览器对DOM API的支持很好，但仍需注意：
- classList在IE10+支持，旧版IE需使用className
- **matches()**方法在不同浏览器中的前缀：
javascript复制const matches =
element.matches ||
element.webkitMatchesSelector ||
element.msMatchesSelector;
5. 实战案例：构建一个简单的待办事项应用
5.1 HTML结构
html复制<div id="todo-app">
<input type="text" id="todo-input" placeholder="输入待办事项">
<button id="add-btn">添加</button>
<ul id="todo-list"></ul>
</div>
5.2 JavaScript实现
javascript复制const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');
// 添加待办事项
addBtn.addEventListener('click', function() {
if(input.value.trim()) {
const li = document.createElement('li');
li.innerHTML = `
<span>${input.value}</span>
<button class="delete-btn">删除</button>
`;
list.appendChild(li);
input.value = '';
}
});
// 事件委托处理删除
list.addEventListener('click', function(e) {
if(e.target.classList.contains('delete-btn')) {
e.target.parentElement.remove();
}
});
5.3 添加本地存储功能
javascript复制// 保存到本地存储
function saveTodos() {
const todos = [];
document.querySelectorAll('#todo-list li span').forEach(span => {
todos.push(span.textContent);
});
localStorage.setItem('todos', JSON.stringify(todos));
}
// 加载本地存储
function loadTodos() {
const todos = JSON.parse(localStorage.getItem('todos')) || [];
todos.forEach(todo => {
const li = document.createElement('li');
li.innerHTML = `
<span>${todo}</span>
<button class="delete-btn">删除</button>
`;
list.appendChild(li);
});
}
// 在添加和删除时调用saveTodos
loadTodos(); // 页面加载时调用
6. DOM操作的最佳实践
- 缓存DOM查询结果：避免重复查询同一元素
javascript复制// 不好
for(let i = 0; i < 10; i++) {
document.querySelector('.item').style.color = 'red';
}
// 好
const item = document.querySelector('.item');
for(let i = 0; i < 10; i++) {
item.style.color = 'red';
}
-
使用现代选择器：优先使用querySelector/querySelectorAll
-
最小化DOM操作：合并多次操作为一次
-
使用CSS类而非直接样式：更易维护
javascript复制// 不好
element.style.display = 'none';
element.style.color = 'red';
// 好
element.classList.add('hidden', 'error');
- 考虑可访问性：确保DOM操作不影响屏幕阅读器等辅助技术
在实际项目中，我发现将DOM操作封装成可复用的函数能显著提高代码质量。例如，创建一个简单的DOM工具库：
javascript复制const Dom = {
create: (tag, attrs = {}, children = []) => {
const el = document.createElement(tag);
Object.keys(attrs).forEach(key => {
el.setAttribute(key, attrs[key]);
});
children.forEach(child => {
el.appendChild(child);
});
return el;
},
on: (el, event, handler) => {
el.addEventListener(event, handler);
return () => el.removeEventListener(event, handler);
},
// 更多实用方法...
};
// 使用示例
const button = Dom.create('button', {class: 'btn'}, [
document.createTextNode('点击我')
]);
Dom.on(button, 'click', () => console.log('点击'));
document.body.appendChild(button);