document.getElementsByTagName():-
This function is used to call the html elements by Tag Name then to apply some task on same TagName's. This DOM Function is used to apply styles to multiple html elements which are same TagName.
Example:-
<head>
<script>
function getstyle(col1, col2)
{
a=document.getElementsByTagName('h2');
for(i=0; i<a.length; i++)
{
a[i].style.color=col1;
a[i].style.backgroundColor=col2;
a[i].style.padding="12px";
a[i].style.border="double";
a[i].style.borderColor="red";
}
a=document.getElementsByTagName('p');
for(i=0; i<a.length; i++)
{
a[i].style.color=col2;
a[i].style.backgroundColor=col1;
a[i].style.padding="6px";
}
}
</script>
</head>
<body>
<h2>WELCOME TO JS</h2>
<p>Types Of DOM Functions</p>
<h2>1. document.getElementById()</h2>
<p>2. document.getElementsByName()</p>
<h2>3. document.getElementsByTagName()</h2>
<input type="button" value="Apply Style1" onClick="getstyle('red','yellow')" />
<input type="button" value="Apply Style2" onClick="getstyle('blue','orange')" />
<input type="button" value="Apply Style3" onClick="getstyle('green','pink')" />
</body>
Output:-
This function is used to call the html elements by Tag Name then to apply some task on same TagName's. This DOM Function is used to apply styles to multiple html elements which are same TagName.
Example:-
<head>
<script>
function getstyle(col1, col2)
{
a=document.getElementsByTagName('h2');
for(i=0; i<a.length; i++)
{
a[i].style.color=col1;
a[i].style.backgroundColor=col2;
a[i].style.padding="12px";
a[i].style.border="double";
a[i].style.borderColor="red";
}
a=document.getElementsByTagName('p');
for(i=0; i<a.length; i++)
{
a[i].style.color=col2;
a[i].style.backgroundColor=col1;
a[i].style.padding="6px";
}
}
</script>
</head>
<body>
<h2>WELCOME TO JS</h2>
<p>Types Of DOM Functions</p>
<h2>1. document.getElementById()</h2>
<p>2. document.getElementsByName()</p>
<h2>3. document.getElementsByTagName()</h2>
<input type="button" value="Apply Style1" onClick="getstyle('red','yellow')" />
<input type="button" value="Apply Style2" onClick="getstyle('blue','orange')" />
<input type="button" value="Apply Style3" onClick="getstyle('green','pink')" />
</body>
Output:-
No comments:
Post a Comment