1

JavaScript 获取节点的子元素

 8 months ago
source link: https://www.myfreax.com/javascript-get-child-element/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
dom

JavaScript 获取节点的子元素

您将学习如何获取第一个子元素、最后一个子元素以及指定元素的所有子元素

Updated At 19 Dec 2023 3 min read
By myfreax
JavaScript 获取节点的子元素

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);
JavaScript-get-child-elements.webp

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK