JavaScript 获取节点的子元素

在本教程中，您将学习如何获取第一个子元素、最后一个子元素以及指定元素的所有子元素。

假设您有以下 HTML 片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Get Child Elements</title>
</head>
<body>
  <ul id="menu">
    <li class="first">Home</li>
    <li>Products</li>
    <li class="current">Customer Support</li>
    <li>Careers</li>
    <li>Investors</li>
    <li>News</li>
    <li class="last">About Us</li>
  </ul>
</body>
</html>

获取第一个子元素

要获取指定元素的第一个子元素，请使用元素的 firstChild 属性：

let firstChild = parentElement.firstChild;

如果 parentElement 没有任何子元素，则 firstChild 返回 null。

firstChild 属性返回一个子节点，该子节点可以是任何节点类型，例如元素节点、文本节点或注释节点。

以下代码打印 #menu 元素的第一个子元素：

let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);

输出：

#text

控制台窗口打印 #text，是一个文本节点。这是为了填充 <ul> 和 <li> 之间的空白，因此浏览器使用空格创建一个 #text 节点作为填充。

请注意，任何空格（例如单个空格、多个空格、回车符和制表符）都将创建 #text 节点。要删除 #text 节点，您可以按如下方式删除空格：

<article id="content"><h2>Heading</h2><p>First paragraph</p></article>

或者要仅获取元素节点的第一个子节点，您可以使用 firstElementChild 属性：

let firstElementChild = parentElement.firstElementChild;

以下代码返回第一个 li 元素，它是菜单的第一个子元素：

let content = document.getElementById('menu');
console.log(content.firstElementChild);

输出：

<li class="first">Home</li>

在这个例子中：

首先，使用 DOM API 方法 getElementById 方法选择 #menu 元素。
其次，使用 firstElementChild 属性获取第一个子元素。

获取最后一个子元素

要获取节点的最后一个子元素，请使用 lastChild 属性：

let lastChild = parentElement.lastChild;

如果 parentElement 没有任何子元素，lastChild 返回 null。

lastChild 属性返回最后一个元素节点、文本节点或注释节点。如果您只想选择具有元素节点类型的最后一个子元素，请使用 lastElementChild 属性：

let lastChild = parentElement.lastElementChild;

以下代码返回菜单中的最后一个子元素：

let menu = document.getElementById('menu');
console.log(main.lastElementChild);

输出：

<li class="last">About Us</li>

获取所有子元素

要获取指定元素的所有子元素 NodeList，请使用 childNodes 属性：

let children = parentElement.childNodes;

childNodes 属性返回任何类型的所有子元素。

要获取指定节点元素类型的子元素，请使用 children 属性：

let children = parentElement.children;

以下示例选择 Id 为 main 元素的所有子元素：

let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);

输出：

结论

firstChild 和 lastChild 返回节点的第一个和最后一个子节点，该节点可以是任何节点类型，包括文本节点、注释节点和元素节点。

firstElementChild 和 lastElementChild 返回第一个和最后一个子元素节点。

childNodes 返回指定节点的所有类型子节点的实时 NodeList。children 返回指定节点的所有子节点。