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
返回指定节点的所有子节点 。