JavaScript getElementsByClassName() Vs getElementById() Method
Last Updated :
22 Nov, 2021
In this article, we will learn about the get Element methods in Javascript for manipulating the HTML elements. We will also understand their implementation through the examples.
JavaScript getElementsByClassName() Method: This method returns an object containing all with the specified class name, as a collection of HTML Collection object representing a collection of the nodes. The elements returned can be accessed using its index starting from zero.
Syntax:
document.getElementsByClassName("class_name");
Parameters: The class name of the elements that you want to get.
Return Value: This function returns the HTML Collection object.
Example 1: This example describes the getElementsByClassName() method to find all the HTML element containing the same class name.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
button {
background-color: black;
color: white;
width: 300px;
padding: 10px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>DOM getElementByClassName() Method</h2>
<div>
<button onclick="yellow()"
class="black yellow">
Click to change to yellow button
</button>
<br>
<button onclick="green()"
class="green">
Click to change to green button
</button>
<br>
</div>
<script>
function yellow() {
document.getElementsByClassName('yellow')[0].style.backgroundColor =
'yellow';
}
function green() {
var elements = document.getElementsByClassName('green');
for(var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'green';
}
}
</script>
</body>
</html>
|
Output:
getElementByClassName() Method
JavaScript getElementById() Method: This method returns the element that has the ID attribute with the specified value. It is the most used HTML DOM method to manipulate, or get info from, an element on your document.
Syntax:
document.getElementById("id_name");
Parameters: This function accepts a single parameter i.e. element ID and it is used to hold the ID of the element.
Return Value: This function returns the ID attribute’s value of the element.
Example 2: This example describes the getElementById() method to specify the id value for which the behavior of the element is changing by applying the style properties.
HTML
<!DOCTYPE html>
<html>
<head>
<script>
// Function to change the
// color of element
function color() {
var demo = document.getElementById("heading");
demo.style.color = "green";
}
</script>
</head>
<body style="text-align:center">
<h1 id="heading">GeeksforGeeks</h1>
<h2>DOM getElementById() Method</h2>
<input type="button"
onclick="color()"
value="Click here to change heading color" />
</body>
</html>
|
Output: From the output, we can notice that this method modifies the HTML element for the specified id value, on clicking the button.
getElementById() Method
Difference between getElementsByClassName() Vs getElementById() Method:
S.No.
|
getElementById() Method
|
getElementsByClassName() Method
|
|
1.
|
This method returns an element object that specifies the element for which id property matches with the specified string ie., it returns a single DOM element whose id matches the specific query.
|
This method returns an array-like object of all child-element that contains all the given class name(s) ie., it will return an HtmlCollection – an array-like structure containing the DOM elements that matched the query, that is needed to iterate through each element in the array to apply the style.
|
|
2.
|
It accepts the id as a parameter value to locate that specific element.
|
It takes the name which is a string, as a parameter value that represents the class name(s) to match. In the case of multiple class names, it can be separated by whitespace.
|
|
3.
|
It returns a null value if no matching element is found in the document.
|
It returns a live HTMLCollection, with the possible length as 0 if no matching elements are found in the document.
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...