資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究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+
廣告