数据结构
网络
关系型数据库管理系统 (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+
广告