compuhelpindia.com

JavaScript HTML DOM Elements

Compuhelpindia.com
« Previous                                                                                                                                       Next Chapter »

This page teaches you how to find and access HTML elements in an HTML page.
HTML Elements by Id
The easiest way to find HTML elements in the DOM, is by using the element id.
This example finds the element with id="Compuhelp":
Eaxmple: 
<!DOCTYPE html>
<html>
<body>
<script>
function show()
{
var a=document.getElementById("compuhelp").value;
alert("value is="+a);
}
</script>
Name<input type="text" name="txt_1" id="compuhelp" />
<input type="button" onblur="show()" value="show" />
</body>
</html>

This example demonstrates the getElementsByTagId

Type the value and click the text box..
Name
HTML Elements by Name
This example finds the element with name="txt_1"

Example: 
<!DOCTYPE html>
<html>
<script>
function help()
{
var msg="your name is";
var a=document.getElementsByName("txt_1");
for(i=0;i<a.length;i++)
{
var b=a[i].value;
msg=msg+b;
}
alert(msg);
}
</script>
</head>
<body>
<p>This example demonstrates the <b>getElementsByTagName</b></p>
Type the value and click the text box..<br>
Name<input type="text" name="txt_1" id="compuhelp" />
lname<input type="text" name="txt_1" id="te" />
<input type="button" onblur="help()" value="show" />
</body>
</html>
This example demonstrates the getElementsByName
Name
Last Name
HTML Elements by Tag Name
Example: 
<!DOCTYPE html>
<html>
<script>
function check()
{
var a=document.getElementsByTagName("input");
for(i=0;i<a.length;i++)
{
alert("value is"+a[i].value);
}
}
</script>
</head>
<body>
Name<input type="text" name="txt_1" id="compuhelp" />
lname<input type="text" name="txt_1" id="te" />
<input type="button"  name="btn" onclick="check()" value="show" />
</body>
</html>
Name
Last Name



« Previous                                                                                                                                       Next Chapter »