Get Elements methods in JavaScript
Get elements methods are used to get HTML elements to which we want to add functionality in JavaScript.
getElementById() Method
getElementById() method gets the HTML element by it's ID attribute. It takes element id as a string argument. It returns the element that has the ID attribute with the specified value.
document.getElementById("demo_compuhelp");
Syntax of getElementById()
document.getElementById(elementID)
Example of getElementById() method
<html>
<head>
<title>example of getElementById()</title>
<script>
function change_color()
{
document.getElementById("demo_compuhelp").style.color="red";
}
</script>
</head>
<body>
<h1 id="demo_compuhelp">Welcome to Compuhelp.</h1>
<input type="button" value="click" onClick="change_color()">
</body>
</html>
getElementsByName() Method
getElementsByName() method gets the HTML elements by there name attribute. It takes elements name attribute as a string argument. It returns the array of elements, who they are having the same name attribute.
var x = document.getElementsByName("demo_compuhelp");
getElementsByName() Method
document.getElementsByName(name)
Example of getElementsByName() Method
<head>
<title>example of getElementsByName()</title>
<script>
function change_color()
{
var x=document.getElementsByName("demo_compuhelp");
x[0].style.color="red";
x[1].style.color="green";
x[2].style.color="blue";
}
</script>
</head>
<body>
<h2 name="demo_compuhelp">Welcome to Compuhelp</h2>
<h2 name="demo_compuhelp">Welcome to Compuhelp</h2>
<h2 name="demo_compuhelp">Welcome to Compuhelp</h2>
<input type="button" value="click" onClick="change_color()">
</body>
</html>
getElementsByClassName() Method
getElementsByClassName() method gets the HTML elements by there class attribute. It takes elements classname as a string argument. It returns the array of elements who they are having the same classname.
var x = document.getElementsByClassName("demo_compuhelp");
Syntax of getElementsByClassName() Method
document.getElementsByClassName(classname)
Example of getElementsByClassName() method
<html>
<head>
<title>example of getElementsByClassName()</title>
<script>
function change_color()
{
var x=document.getElementsByClassName("demo_compuhelp");
x[0].style.color="red";
x[1].style.color="green";
x[2].style.color="blue";
}
</script>
</head>
<body>
<h1 class="demo_compuhelp">Welcome to Compuhelp</h1>
<h3 class="demo_compuhelp">Welcome to Compuhelp</h3>
<p class="demo_compuhelp">Welcome to Compuhelp</p>
<input type="button" value="click" onClick="change_color()">
</body>
</html>
getElementsByTagName() Method
getElementsByTagName() method gets the HTML elements by there tag name. It takes elements or tag name as a string argument. It returns the array of elements, who they belong to same category..
var x=document.getElementsByTagName("h1");
Syntax of getElementsByTagName() Method
document.getElementsByTagName(tagname)
Example of getElementsByTagName() Method
<html>
<head>
<title>example of getElementsByTagName()</title>
<script>
function change_color()
{
var x=document.getElementsByTagName("h1");
x[0].style.color="red";
x[1].style.color="green";
x[2].style.color="blue";
}
</script>
</head>
<body>
<h1>Welcome to compuhelp</h1>
<h1>Welcome to compuhelp</h1>
<h1>Welcome to compuhelp</h1>
<input type="button" value="click" onClick="change_color()">
</body>
</html>