JavaScript中特定标签包含的元素数量？

在本文中，我们将学习如何使用合适的示例在JavaScript中获取特定标签包含的元素数量。

在JavaScript中查找特定标签包含的元素数量有两种方法。一种是使用现有的属性`childElementCount`，另一种是使用JavaScript的`length`属性。

为了更好地理解，让我们来看一些使用JavaScript的`childElementCount`和`length`属性来完成上述任务的示例。

使用childElementCount属性

childElementProperty将返回JavaScript中特定id标签包含的元素数量。

语法

以下是childElementProperty的语法：

document.getElementById(‘IDtagName’).childElementCount;

其中，`IDtagName`是需要计算子元素数量的id标签的名称。此函数返回一个数字，表示子元素的数量。

示例1

这是一个查找JavaScript中特定id标签包含的元素数量的示例程序。

<!DOCTYPE HTML>
<html>
<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">
   <title>The number of elements a particular tag contains in JavaScript</title>
</head>
<h3>To find the number of elements a particular tag contains in JavaScript</h3>
<body style="text-align:center;">
   <div id="social-media">
      <p>The most popular websites that are used by young generation are :</p>
      <a href="#">Google</a> <br />
      <a href="#">Facebook</a> <br />
      <a href="#">Instagram</a> <br />
   </div>
   <p id="text1"></p>
   <script type="text/javascript">
      document.getElementById("text1").innerHTML ="The number of elements a particular tag contains in JavaScript is : " + document.getElementById("social-media").childElementCount;
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

示例2

这是一个查找JavaScript中特定id标签包含的元素数量的示例程序。

<!DOCTYPE HTML>
<html>
<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">
   <title>The number of elements a particular tag contains in JavaScript</title>
</head>
<h3>To find the number of elements a particular tag contains in JavaScript</h3>
<body style="text-align:center;">
   <div id="cars">
      <p>The most popular car Brands in India are :</p>
      <p>Maruti Suzuki</p>
      <p>Hyundai</p>
      <p>Toyota</p>
      <p>KIA</p>
   </div>
   <p id="text1"></p>
   <script type="text/javascript">
      document.getElementById("text1").innerHTML ="The number of elements a particular tag contains in JavaScript is : " + document.getElementById("cars").childElementCount;
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

使用length属性

length属性将返回JavaScript中特定class标签包含的元素数量。

语法

以下是length属性的语法：

document.getElementsByClassName(‘className’).length;
or
object.getElementsByClassName(‘className’).length;

其中，`className`是需要计算子元素数量的class标签的名称。此方法返回一个数字，表示子元素的数量。

示例3

这是一个查找JavaScript中特定class标签包含的元素数量的示例程序。

<!DOCTYPE HTML>
<html>
<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">
   <title>The number of elements a particular tag contains in JavaScript</title>
</head>
<h3>To find the number of elements a particular tag contains in JavaScript using getElementsByClassName()</h3>
<body style="text-align:center;">
   <div id="car-brands">
      <p>The most popular brand cars in India are :</p>
      <p class="cars">Maruti Suzuki</p>
      <p class="cars">Toyota</p>
      <p class="cars">Hyundai</p>
      <p class="cars">KIA</p>
   </div>
   <p id="text1"></p>
   <script type="text/javascript">
      var root = document.getElementById('car-brands');
      var child = root.getElementsByClassName('cars');
      document.getElementById("text1").innerHTML ="The number of elements a particular tag contains in JavaScript is : " + child.length;
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

更新于：2022年12月9日

浏览量：1000+

开启你的职业生涯

完成课程获得认证

开始学习
广告