47、深入理解 DOM 操作：从选择元素到动态生成目录

深入理解 DOM 操作：从选择元素到动态生成目录

在网页开发中，对文档对象模型（DOM）的操作是一项核心技能。通过操作 DOM，我们可以动态地改变网页的结构、内容和样式。下面将详细介绍 DOM 操作的各个方面，包括元素选择、文档遍历、属性操作、内容处理以及节点的创建、插入和删除等，并通过一个示例展示如何动态生成文档的目录。

1. 元素选择

在 DOM 中，有多种方式可以选择元素。例如， document.forms 属性可以让我们通过表单的 id 或 name 来访问表单元素。示例代码如下：

document.forms.address; // 访问 id 为 address 的表单

不过， document.all 属性虽然也能选择元素，但它已经被弃用，不建议再使用。

2. 文档结构与遍历

当我们选择了一个元素后，有时需要找到与之结构相关的部分，如父元素、兄弟元素和子元素。DOM 提供了两种遍历方式，一种是只关注元素节点，另一种是包含文本节点。

2.1 只关注元素节点的遍历

通过元素对象的一些属性，我们可以方便地访问元素的父元素、子元素和兄弟元素：
- parentNode ：元素的父元素，可能是另一个元素或文档对象。
- children ：包含元素子元素的 NodeLis