JavaScript编程

操作 DOM 树的节点

要操作 DOM 树的节点，您需要直接定位它们或从某个起始点开始逐步导航。DOM 的 Document 接口作为访问网页内容的入口，提供了一套丰富的属性和方法来定位特定的节点。这些方法可以返回单个节点或节点数组。

以下是使用 HTML 页面的示例，演示了最重要的方法。当点击按钮时，会调用 show 函数。示例代码会在其中展示。

使用 ID 定位元素

使用 id 属性标记 HTML 元素是一种简单、快速且精确的定位方法。例如，<p id="p2">，然后使用该 id 作为 getElementById() 的参数来获取元素。下面的代码示例展示了如何通过 id 定位元素并显示其内容。

function show() {
  "use strict";
  const elem = document.getElementById("p2");
  alert(elem.innerHTML);
}

getElementById 方法返回单个元素（如果 id 不唯一，则返回第一个匹配的元素）。

如果该元素不是文本节点，而是具有子节点的节点，返回值是该元素及其所有子元素。

function show() {
  "use strict";
  const elem = document.getElementById("div_3");
  alert(elem.innerHTML);
}
// 预期输出:
// <p>Another paragraph 1</p>
// <p>Another paragraph 2</p>
// <p>Another paragraph 3</p>

使用标签名定位元素

另一种查找 HTML 页面中元素的方法是 getElementsByTagName 方法。它接受一个标签名，例如 'h1'、'div' 或 'p'，并返回所有匹配的元素，返回的是一个数组。

下面我们使用该方法获取所有 'div' 元素的数组。

function show() {
  "use strict";

  // 如果要在整个文档中查找，必须指定 'document'
  let elemArray = document.getElementsByTagName("div");
  // 遍历所有数组元素
  for (let i = 0; i < elemArray.length; i++) {
    alert(elemArray[i].innerHTML);
  }

  alert("Part 2");

  // 如果只想在子树中查找，必须先定位该子树的根节点
  const elem = document.getElementById("div_2");
  elemArray = elem.getElementsByTagName("div");
  for (let i = 0; i < elemArray.length; i++) {
    alert(elemArray[i].innerHTML);
  }
}

使用类名定位元素

接下来，元素可以通过与其关联的 CSS 类选择器来定位。类选择器可以有复杂的语法，这里我们只使用类名的简单形式。

下面的示例获取所有使用了 CSS 类 text 的元素，这通过第一个 div 中的三个段落实现。请注意，其他段落并不会被选中。

function show() {
  "use strict";

  let elemArray = document.getElementsByClassName("text");
  // 遍历所有数组元素
  for (let i = 0; i < elemArray.length; i++) {
    alert(elemArray[i].innerHTML);
  }
}

使用查询选择器

前面提到的定位方法使用了特定的语法来定位元素。但也有一种通用方法，可以结合所有这些方法的功能——甚至更多功能。

查询选择器使用复杂的语法，包括 HTML 元素的 id、HTML 元素名称、HTML 属性、CSS 类、位置等。它可以定位单个元素或多个元素的列表。要获取满足选择器的第一个元素，使用 querySelector 方法。如果要获取所有匹配的元素，使用 querySelectorAll。

function show() {
  "use strict";

  // '#' 通过 ID 定位，'.' 通过 CSS 类定位
  let elemArray = document.querySelectorAll("h1, #p2, .head_2");
  // 遍历所有数组元素
  for (let i = 0; i < elemArray.length; i++) {
    alert(elemArray[i].innerHTML);
  }
}

导航 DOM 树

您可以在 DOM 树中从根节点到叶子节点进行导航。这是通过定位一个元素，并将该节点作为新的根节点进行后续的导航步骤。

function show() {
  "use strict";

  // 从 'div_2' 开始
  const elem_1 = document.getElementById("div_2");
  // 使用该元素作为新的根节点进行进一步选择
  const elemArray = elem_1.getElementsByTagName("h2");
  for (let i = 0; i < elemArray.length; i++) {
    alert(elemArray[i].innerHTML);
  }
  // 只选择了子节点 'h2'！第一个 'h2' 被忽略。
}

参考资料

• DOM 方法