、

等。
属性节点（Attribute Node）
：表示元素的属性，如
id
、
class
等。
文本节点（Text Node）
：表示元素中的文本内容。
文档节点（Document Node）
：表示整个文档。
注释节点（Comment Node）
：表示HTML注释。
每种节点类型都有其特定的
nodeType
属性值，可以通过该值判断节点类型：
// 获取文档类型
console.log(document.nodeType); // 9 (文档节点)

// 获取元素类型
const element = document.getElementById(‘myElement’);
console.log(element.nodeType); // 1 (元素节点)

// 获取文本节点类型
const textNode = element.firstChild;
console.log(textNode.nodeType); // 3 (文本节点)
二、DOM选择器
DOM选择器是获取页面元素的基础，JavaScript提供了多种方法来选择DOM元素。
2.1 传统选择方法
2.1.1 通过ID选择元素
getElementById()
方法通过元素的ID属性获取单个元素：

2.1.2 通过标签名选择元素
getElementsByTagName()
方法通过元素的标签名获取元素集合：

第一个段落

第二个段落

第三个段落

2.1.3 通过类名选择元素
getElementsByClassName()
方法通过元素的类名获取元素集合：

2.1.4 通过name属性选择元素
getElementsByName()
方法通过元素的name属性获取元素集合：
男
女

2.2 现代选择方法
2.2.1 querySelector()方法
querySelector()
方法使用CSS选择器语法获取匹配的第一个元素：

2.2.2 querySelectorAll()方法
querySelectorAll()
方法使用CSS选择器语法获取匹配的所有元素：

2.3 关系选择器
2.3.1 父子关系选择
// 获取父元素
const child = document.getElementById(‘child’);
const parent = child.parentNode; // 或 child.parentElement

// 获取所有子元素
const parent = document.getElementById(‘parent’);
const children = parent.children; // 只返回元素节点
const childNodes = parent.childNodes; // 返回所有类型的节点（包括文本节点、注释等）

// 获取第一个子元素
const firstChild = parent.firstElementChild; // 只返回元素节点
const firstNode = parent.firstChild; // 可能返回文本节点等其他类型节点

// 获取最后一个子元素
const lastChild = parent.lastElementChild; // 只返回元素节点
const lastNode = parent.lastChild; // 可能返回文本节点等其他类型节点
2.3.2 兄弟关系选择
// 获取前一个兄弟元素
const element = document.getElementById(‘myElement’);
const prevSibling = element.previousElementSibling; // 只返回元素节点
const prevNode = element.previousSibling; // 可能返回文本节点等其他类型节点

// 获取后一个兄弟元素
const nextSibling = element.nextElementSibling; // 只返回元素节点
const nextNode = element.nextSibling; // 可能返回文本节点等其他类型节点
三、DOM操作
3.1 修改元素内容
3.1.1 修改文本内容

3.1.2 修改HTML内容

3.2 修改元素属性
3.2.1 标准属性操作
示例链接

3.2.2 通用属性操作

3.3 修改元素样式
3.3.1 直接修改style属性

3.3.2 通过className修改样式

3.3.3 动态创建和应用样式

四、DOM事件处理
4.1 事件监听
4.1.1 HTML事件处理程序
点击我
4.1.2 DOM0级事件处理程序
点击我

4.1.3 DOM2级事件处理程序（推荐）
点击我

4.2 事件对象
当事件发生时，浏览器会创建一个事件对象，包含与事件相关的信息：
点击我

4.3 事件冒泡与捕获
4.3.1 事件冒泡

4.3.2 事件捕获

4.4 事件委托
事件委托是利用事件冒泡原理，将事件监听器添加到父元素上，通过事件对象的target属性判断实际触发事件的子元素：

• 项目1
• 项目2
• 项目3
• 项目4

五、动态内容创建
5.1 创建新元素
5.1.1 使用createElement方法

5.1.2 使用cloneNode方法

5.2 插入节点
5.2.1 appendChild方法

5.2.2 insertBefore方法

5.2.3 insertAdjacentHTML和insertAdjacentElement方法

5.3 删除和替换节点
5.3.1 删除节点

5.3.2 替换节点

六、实例项目：动态待办事项列表
让我们通过一个综合实例来应用前面学到的DOM操作知识，创建一个功能完整的待办事项列表应用。

待办事项列表

这个待办事项列表应用展示了DOM操作的多个方面：
元素选择
：使用
getElementById
和
querySelectorAll
选择DOM元素。
事件处理
：添加点击事件、键盘事件监听器，处理用户交互。
动态内容创建
：使用
createElement
创建新的列表项，使用
appendChild
添加到DOM中。
元素属性操作
：修改元素的类名、文本内容、属性值等。
本地存储
：使用
localStorage
保存和加载待办事项，实现数据持久化。
事件委托
：通过父元素处理子元素的事件，提高性能。
条件渲染
：根据过滤器的值和待办事项的状态动态更新UI。
七、最佳实践和性能优化
7.1 减少DOM操作
频繁的DOM操作会导致页面重排和重绘，影响性能。以下是一些减少DOM操作的方法：
7.1.1 使用文档片段

7.1.2 批量更新样式

7.2 事件委托
事件委托是提高性能的重要技术，特别是对于大量相似元素的事件处理：

7.3 使用防抖和节流
对于频繁触发的事件（如resize、scroll、input等），使用防抖和节流技术可以减少事件处理函数的执行次数：

7.4 使用requestAnimationFrame优化动画

开始动画

八、进阶技巧和常见问题解决方案
8.1 自定义事件
自定义事件允许我们创建和触发自己的事件，有助于组件间的通信：

8.2 MutationObserver监听DOM变化
MutationObserver允许我们监听DOM树的变化，如元素的添加、删除、属性变化等：

添加元素
修改属性

8.3 解决常见问题
8.3.1 事件绑定在动态创建的元素上

添加新按钮

8.3.2 处理图片加载事件

8.3.3 防止表单重复提交

提交

九、总结与展望
9.1 知识总结
本文详细介绍了HTML DOM文档对象模型的应用，从基础概念到高级技巧，包括：
DOM基础概念
：理解DOM树结构和节点类型是操作DOM的基础。
DOM选择器
：掌握各种选择元素的方法，包括传统方法和现代CSS选择器。
DOM操作
：学习如何修改元素内容、属性和样式。
DOM事件处理
：理解事件模型，掌握事件监听、事件对象和事件委托。
动态内容创建
：学会创建、插入、删除和替换DOM节点。
性能优化
：了解减少DOM操作、使用事件委托、防抖节流等优化技术。
进阶技巧
：掌握自定义事件、MutationObserver等高级功能。
通过本文的学习，读者应该能够熟练运用DOM API创建动态、交互性强的网页应用。
9.2 未来展望
随着Web技术的发展，DOM操作也在不断演进：
Web Components
：通过自定义元素、Shadow DOM等技术，创建可重用的组件。
虚拟DOM
：React等框架使用的虚拟DOM技术，通过在内存中操作DOM的表示，减少实际DOM操作，提高性能。
现代前端框架
：Vue、Angular、React等框架提供了更高级的抽象，使开发者能够以声明式的方式操作DOM。
WebAssembly
：允许使用C++、Rust等语言编写高性能的Web应用，与JavaScript和DOM交互。
尽管有这些新技术，理解原生DOM操作仍然是前端开发的基础，它有助于开发者更好地理解Web工作原理，并在需要时直接操作DOM。
9.3 学习建议
要精通DOM操作，建议：
多实践
：通过实际项目练习DOM操作，加深理解。
阅读源码
：研究jQuery等DOM操作库的源码，学习其设计思想和实现方式。
关注性能
：始终关注DOM操作的性能影响，学习优化技巧。
学习新标准
：关注Web标准和API的发展，如Intersection Observer、Resize Observer等新API。
结合框架学习
：在学习现代前端框架时，理解它们是如何封装和优化DOM操作的。
通过不断学习和实践，你将能够熟练掌握DOM操作，创建出高性能、交互性强的Web应用。