在 JavaScript 中获取 body 元素子元素的标签名称？

元素的一个名为“children”的属性会将元素的所有子元素作为对象返回。在本教程中，我们将学习如何使用 Javascript 获取父元素的子元素。挑战在于使用 JavaScript 选择 HTML 文档中的某个特定元素，并检索该父元素的所有子元素。有两种方法可以实现此目的以获取子元素 -

  • 使用 children 属性
  • 使用 querySelector 方法

我们将通过示例来讨论这两种方法，并了解它们的应用方式。

DOM children 属性通过返回给定元素的所有子元素的 HTMLCollection 来实现。

方法 1

  • 选择要选择其子元素的元素。
  • 使用 .children 属性访问元素的每个子元素。
  • 根据索引选择特定的子元素。

children 属性

当请求特定元素的子元素时，DOM children 属性会返回所有这些元素的 HTMLCollection。可以通过索引号访问集合中的元素。ChildNodes 包含所有节点，包括文本和注释节点，而 Children 仅包含元素节点。这是 ChildNodes 与 Children 不同的地方。此属性为只读属性。

语法

element.children

返回值

它返回一组可以通过索引找到的元素节点。

示例 1

此示例实现了 .children 属性，以检索给定元素的所有子元素的 HTMLCollection。

<!DOCTYPE html>
<html>
<title>Tag names of body element's children in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <p>The count of div id "divCount" is</p>
   <div id="result"></div>
   <div id="divCount">
      <p>This is first div element</p>
      <p>This is second div element</p>
      <p>This is third div element</p>
   </div>
   <script>
      let count = document.getElementById("divCount").children.length;
      document.getElementById("result").innerHTML = count;
   </script>
</body>
</html>

方法 2

querySelector() 方法在 HTML 中返回文档中第一个与给定 CSS 选择器或选择器匹配的元素。

  • 为了选择子元素，您必须首先选择元素的父元素。
  • 使用父元素的 .querySelector() 方法。
  • 使用该子元素的 className 选择特定的子元素。

querySelector 方法

querySelector() 方法仅返回与给定选择器匹配的第一个元素。要检索所有匹配项，请使用 querySelectorAll() 方法。

必需的字段是选择器。它指定一个 CSS 选择器或选择器来匹配元素。这些选择器用于根据其 ID、类、类型等选择 HTML 元素。如果有多个选择器，则将使用逗号分隔它们。

返回的元素是文档中首先出现的元素。如果选择器匹配内容中多次出现的 id（每个页面上都应该唯一），则返回第一个匹配的元素。

语法

element.querySelector(selectors);

返回值

当文档中存在指定的 CSS 选择器或选择器时，此方法用于返回第一个与之匹配的元素。

示例 1

在这个例子中，让我们了解一下“div”元素如何更改第一个“p”元素的文本以理解 -

<!DOCTYPE html>
<html>
<title>Tag names of body element's children in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <div id="divCount">
      <p>This is your "p" element in div.</p>
      <h4>This is your "h4" element in div.</h4>
   </div>
   <p>To modify the text of the first p element in div, click the button.</p>
   <button onclick="myFun()">Click Here</button>
   <script>
      function myFun() {
         let a = document.getElementById("divCount");
         a.querySelector("p").innerHTML = "Welcome to Tutorialspoint!";
      }
   </script>
</body>
</html>

更新于： 2022年8月24日

316 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告