JavaScript DOM：获取节点的子元素

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

假设您有以下 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>Code language: HTML, XML (xml)

获取第一个子元素

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

let firstChild = parentElement.firstChild; Code language: JavaScript (javascript)

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

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

以下脚本显示了 #menu 元素的第一个子元素

let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);Code language: JavaScript (javascript)

输出

#textCode language: CSS (css)

控制台窗口显示 #text，因为插入了一个文本节点以保持 <ul> 和 <li> 标签之间的空白。此空白创建了一个 #text 节点。

请注意，任何空白，例如单个空格、多个空格、换行符和制表符，都将创建一个 #text 节点。要删除 #text 节点，可以删除空格，如下所示

<article id="content"><h2>Heading</h2><p>First paragraph</p></article>Code language: HTML, XML (xml)

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

let firstElementChild = parentElement.firstElementChild;Code language: JavaScript (javascript)

以下代码返回第一个列表项，它是菜单的第一个子元素

let content = document.getElementById('menu');
console.log(content.firstElementChild);Code language: JavaScript (javascript)

输出

<li class="first">Home</li>Code language: HTML, XML (xml)

在此示例中

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

获取最后一个子元素

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

let lastChild = parentElement.lastChild; Code language: JavaScript (javascript)

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

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

let lastChild = parentElement.lastElementChild;Code language: JavaScript (javascript)

以下代码返回列表项，它是菜单的最后一个子元素

let menu = document.getElementById('menu');
console.log(main.lastElementChild);Code language: JavaScript (javascript)

输出

<li class="last">About Us</li>Code language: HTML, XML (xml)

获取所有子元素

要获取指定元素子元素的实时 NodeList，可以使用 childNodes 属性

let children = parentElement.childNodes;Code language: JavaScript (javascript)

childNodes 属性返回具有任何节点类型的所有子元素。要仅获取具有元素节点类型的子元素，可以使用 children 属性

let children = parentElement.children;Code language: JavaScript (javascript)

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

let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);Code language: JavaScript (javascript)

输出

摘要

firstChild 和 lastChild 返回节点的第一个和最后一个子节点，它可以是任何节点类型，包括文本节点、注释节点和元素节点。
firstElementChild 和 lastElementChild 返回第一个和最后一个子元素节点。
childNodes 返回指定节点的所有节点类型的实时 NodeList。children 返回指定节点的所有子 Element 节点。

测验

本教程是否有帮助？