DOM操作通过API修改网页结构，事件委托利用冒泡机制在父元素处理子元素事件。1. 使用getElementById、querySelector等方法获取并操作元素；2. 事件监听绑定在冒泡阶段，e.target指向实际触发元素；3. 事件委托将监听器绑定到父级，动态添加的子元素无需重新绑定；4. 优点包括减少内存占用、支持动态内容、简化维护；5. 推荐使用e.target.matches()精准判断目标元素，必要时调用preventDefault或stopPropagation。结合二者可提升性能与代码可维护性。
在现代前端开发中，JavaScript 通过浏览器提供的 DOM API 来操作网页结构和响应用户行为。其中，DOM 操作与事件委托是两个核心机制，掌握它们有助于写出更高效、可维护的代码。
DOM 操作基础
文档对象模型（DOM）是 HTML 文档的树状表示，JavaScript 可以通过 API 对其进行访问和修改。
常用 DOM 操作方法包括：
- document.getElementById('id')：通过 ID 获取单个元素
- document.querySelector('.class')：使用 CSS 选择器获取第一个匹配元素
- document.querySelectorAll('li')：获取所有匹配的元素列表
- element.appendChild(newEl)：添加子元素
- element.remove()：移除元素本身
- element.classList.add('active')：操作类名
- element.setAttribute('data-id', 1)：设置属性
这些方法可以直接改变页面内容、样式或结构。频繁操作 DOM 可能影响性能，建议批量更新或使用文档片段（DocumentFragment）减少重排和重绘。
立即学习“Java免费学习笔记（深入）”；
事件监听与冒泡机制
JavaScript 通过事件监听响应用户交互，如点击、输入等。理解事件流对实现事件委托至关重要。
DOM 事件遵循三个阶段：捕获 → 目标 → 冒泡。大多数情况下，事件监听绑定在冒泡阶段。
示例：
element.addEventListener('click', function(e) {console.log(e.target); // 触发事件的实际元素
});
e.target 指向实际触发事件的元素，而 this 或 e.currentTarget 指向绑定监听器的父元素，这是事件委托的关键。
事件委托的原理与优势
事件委托利用事件冒泡机制，将事件监听器绑定到父元素上，从而管理多个子元素的事件。
适用场景：动态生成的元素、大量子节点（如列表项）。
示例：为一个无序列表的所有 添加点击效果，无需逐个绑定：
const list = document.querySelector('#myList');list.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('Clicked item:', e.target.textContent);
}
});
这样即使后续通过 JavaScript 动态添加新的 ，点击事件依然有效，因为监听器在父级。
优点：
- 减少内存占用，避免重复绑定多个监听器
- 支持动态内容，无需重新绑定
- 简化代码维护
注意事项与最佳实践
使用事件委托时需注意选择器判断的准确性，避免误触发。
建议使用 e.target.matches() 判断是否符合目标条件，更具灵活性：
if (e.target.matches('li.special')) {// 仅处理带有 special 类的 li
}
同时，记得在必要时调用 e.preventDefault() 阻止默认行为，或 e.stopPropagation() 防止事件冒泡过度传播。
基本上就这些。DOM 操作和事件委托结合使用，能让前端代码更简洁高效。理解底层机制比死记语法更重要。
