JavaScript document.getElementsByTagName() Example

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:-

WELCOME TO JS

Types Of DOM Functions

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

JavaScript document.getElementsByName() Example

document.getElementsByName():-

This function is used to call the html elements by Name Value of the Tag then to applay some task on same name value tags. This DOM Function is used to apply styles to multiple html elements which are defined by same name value.

Example:

<head>
<script>
function getstyle(col1, col2)
{
a=document.getElementsByName('t1');
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.getElementsByName('p1');
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>
<h1 name="t1">WELCOME TO JS</h1>
<p name="p1">Types Of DOM Functions</p>
<h2>1. document.getElementById()</h2>
<h2 name="t1">2. document.getElementsByName()</h2>
<h2 name="p1">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:---------------------------------------------------->

WELCOME TO JS

Types Of DOM Functions

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

JavaScript Inline Event Effect Example

With out using DOM Function we can apply JavaScript Inline Event Effect:

Example:-

<body>
<p>Keep Mouse Pointer on below heading!</p>
<h2 onmouseover="this.style.color='red'; this.style.backgroundColor='yellow'; this.style.padding='12px';" onMouseOut="this.style.color='green'; this.style.backgroundColor='pink'; this.style.padding='12px';">Welcome TO JS DOM Functions</h2>
</body>

Output:-

Keep Mouse Pointer on below heading!

Welcome TO JS DOM Functions

JavaScript document.getElementById() Example

document.getElementById() :-

This function is used to call the html element by tag id name then to apply some task on it.

Example:

<head>
<script>
function style1()
{
a=document.getElementById('t1');
a.style.color="green";
a.style.backgroundColor="yellow";
a.style.padding="12px";
a.style.border="double";
a.style.borderColor="red";
}
</script>
</head>

<body>
<h2 id="t1">WELCOME TO JS DOM Functions</h2>
<input type="button" value="Apply Style" onClick="style1()" />
</body>

Output:-

WELCOME TO JS DOM Functions

JavaScript DOM (Document Object Model) Functions

DOM (Document Object Model) Functions

These functions are used to perform some task on HTML elements.
These are mainlu used for documantation effects. Those effects will occured by javascript event attributes in html tag.

These are mainly 3 types:-

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

IT Job Careers

Pages

Tuesday, October 1, 2013

JavaScript document.getElementsByTagName() Example

WELCOME TO JS

1. document.getElementById()

3. document.getElementsByTagName()

JavaScript document.getElementsByName() Example

WELCOME TO JS

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

JavaScript Inline Event Effect Example

Welcome TO JS DOM Functions

JavaScript document.getElementById() Example

WELCOME TO JS DOM Functions

JavaScript DOM (Document Object Model) Functions