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

假设您有以下 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);

输出:

结论

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

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

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