JS 获取孩子

在 JavaScript 中，我们可以使用各种方法来获取 HTML 文档中的孩子元素。以下是一些常用的方法：

childNodes

childNodes 方法返回的是一个 NodeList 对象，其中包含了指定节点的所有子节点，包括文本节点。可以使用 node.nodeType 属性来确定节点类型。

例如，以下代码段将返回目标节点的所有子节点：

const parent = document.getElementById("parent");
const children = parent.childNodes;

children.forEach(child => {
  if (child.nodeType === Node.ELEMENT_NODE) {
    // 处理元素节点
  } else if (child.nodeType === Node.TEXT_NODE) {
    // 处理文本节点
  }
});

children

children 方法返回的也是一个 NodeList 对象，但其中只包含目标节点的所有子元素节点，不包括文本节点。

以下代码段将返回目标节点的所有子元素节点：

const parent = document.getElementById("parent");
const children = parent.children;

children.forEach(child => {
  // 处理元素节点
});

firstChild 和 lastChild

firstChild 方法返回目标节点的第一个子节点，而 lastChild 方法返回目标节点的最后一个子节点。其中，空格、回车等空白符也会被看作文本节点，因此可能需要使用循环来跳过它们。

以下代码段将返回目标节点的第一个元素子节点：

const parent = document.getElementById("parent");
let child = parent.firstChild;

while (child.nodeType !== Node.ELEMENT_NODE) {
  child = child.nextSibling;
}

// 处理元素节点

firstElementChild 和 lastElementChild

与 firstChild 和 lastChild 相对应，firstElementChild 和 lastElementChild 分别返回目标节点的第一个元素子节点和最后一个元素子节点。

以下代码段将返回目标节点的第一个元素子节点：

const parent = document.getElementById("parent");
const child = parent.firstElementChild;

// 处理元素节点

以上就是 JavaScript 中获取孩子元素的常用方法，实际应用中，需要根据具体情况选择合适的方法。