DOM树结构详解：元素节点、文本节点和属性节点

DOM 节点类型和获取方法 在 HTML 结构中，我们可以将其看作是一个树形结构，即 DOM 树。DOM 树是由多个节点组成的，每个节点都有其特定的类型和属性。在本节中，我们将介绍 DOM 节点的分类、类型和获取方法。 DOM 节点类型 在 DOM 树中，我们可以将节点分为三大类：元素节点、文本节点和属性节点。 * 元素节点（Element Node）：我们通过 getElementBy 获取到的都是元素节点，例如 `<p>`、`<div>` 等标签。 * 文本节点（Text Node）：我们通过 innerText 获取到的就是元素的文本节点，例如 `<p>hello</p>` 中的 "hello"。 * 属性节点（Attribute Node）：我们通过 getAttribute 获取到的就是元素的属性节点，例如 `<a href="https://www.example.com">` 中的 href。 获取节点 在 DOM 树中，我们可以通过各种方法获取节点。下面是一些常用的获取节点的方法： * childNodes：获取某一个节点下所有的子一级节点。例如，`oDiv.childNodes` 将获取 `<div>` 元素下的所有子节点。 * children：获取某一节点下所有的子一级元素节点。例如，`oDiv.children` 将获取 `<div>` 元素下的所有子元素节点。 * getElementBy：获取某一类型的元素节点，例如 `getElementById`、`getElementsByClassName` 等。 * innerText：获取某个元素节点中的文本节点。 * getAttribute：获取某个元素节点的属性节点。 实例分析 在上面的代码中，我们使用 `document.querySelector('div')` 获取了页面中的 `<div>` 元素，然后使用 `oDiv.childNodes` 获取了该元素下的所有子节点。结果显示，我们获取到了三个节点：两个文本节点和一个元素节点。 第一个节点是一个文本节点，包含了从 `<div>` 到 `<p>` 之间的换行和空格。第二个节点是一个元素节点，即 `<p>` 标签。第三个节点也是一个文本节点，包含了从 `</p>` 到 `</div>` 之间的换行和空格。 通过这个例子，我们可以看到不同的节点类型，并了解如何使用不同的方法来获取节点。在实际开发中，我们可以根据需要选择合适的方法来获取节点，以便更好地操作 DOM 树。