document.getelementsbytagname to get list of tags and managing property of the tag in JavaScript

We can use getElementsByTagName to get total number of tags , number of a particular tag, manage the style of a tag and many more. Let us first start with our code to know total number of tags used in the page. Here is the demo and sample code. Here is the source code

<html>
<head>
<title>Demo of getElementByTagName total number of tags in the page</title>
<script type="text/javascript">
function tag_no(){
var x=document.getElementsByTagName("*");
var str = "Total tags : " + x.length;
document.getElementById('msg').innerHTML=str;
}
</script>
</head>
<body>
<br><br><br>
<p> this is one para</p>
This is simple text without any para 
<p>this is second Para</p>
<div id='msg'></div><br>
<input type=button onclick='tag_no()' value='Calculate'>

</body>
</html>

The changes inside function is here

function tag_no(){

var y=document.getElementsByTagName("br");

var str=" BR  tags : " + y.length;

document.getElementById('msg').innerHTML=str;

}

We can manage the property of each tag by this . We will be looping to change the property of all P tags. Here is the source.

<script type="text/javascript">
function tag_no(){
var y=document.getElementsByTagName("p");
for(var i=0;i<y.length;i++){
y[i].style.color = 'red';
}
}
</script>

Subscribe to our YouTube Channel here

JavaScript getElementsByTagName()

Subscribe