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+

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告