Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Number of elements a particular tag contains in JavaScript?
In this article we are going to learn about the number of elements a particular tag contains in JavaScript with suitable examples.
There are two possible ways to find the number of elements a particular tag contains in JavaScript. One of the possible way is to use the existing property childElementCount and the other way is to use the length property of JavaScript.
To understand better, Let’s look into the examples which achieved the above task by using childElementCount and length property of JavaScript.
Using the childElementCount property
The childElementProperty will return the number of elements a particular id tag contains in JavaScript.
Syntax
The following is the syntax of the childElementProperty −
document.getElementById(‘IDtagName’).childElementCount;
Where, IDtagName is the name of id tag for which the number of child elements needs to be counted. This function returns a number which determines the number of child elements.
Example 1
This is an example program to find the number of elements that a particular id tag contains in JavaScript.
<!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>
On executing the above code, the following output is generated.
Example 2
This is an example program to find the number of elements that a particular id tag contains in JavaScript.
<!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>
On executing the above code, the following output is generated.
Using the length property
The length property will return the number of elements a particular class tag contains in JavaScript.
Syntax
The following is the syntax of the length property −
document.getElementsByClassName(‘className’).length; or object.getElementsByClassName(‘className’).length;
Where, className is the name of class tag for which the number of child elements needs to be counted. This method returns a number which determines the number of child elements.
Example 3
This is an example program to find the number of elements that a particular class tag contains in JavaScript.
<!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>
On executing the above code, the following output is generated.
807 Views
