In this article, we will learn how to find the HTML elements from the HTML document to change or update their content. JavaScript provides us with some methods to find and manipulate HTML elements without even changing the code inside them.
Here are the ways of finding HTML elements in JavaScript:
- Getting HTML elements by Name
- Getting HTML elements by TagName
- Getting HTML elements by id
- Getting HTML elements by ClassName
- Getting HTML elements by CSS selectors
Getting HTML elements by Name: The getElementsByName() method in JavaScript is used to access the HTML element using the name given to the element by the user. The name here refers to the name attribute inside the HTML element. It will return all the elements containing the specified name present in the HTML document.
Syntax:
document.getElementsByName('attribute_name');
Parameter: It takes the same string value as a parameter as given to the name attribute inside HTML elements that users wanted to access.
Return value: It returns an array of all the HTML elements matching with the passed parameter value.
Example:
HTML
<!DOCTYPE html><html lang="en"><body> <p name="demoPara"></p> <h2>Welcome To GFG</h2> <p name="demoPara"></p> <button onclick="addText()"> Add Text </button> <script> function addText() { var para = document.getElementsByName("demoPara"); para[0].innerHTML="Hey Geek!!"; para[1].innerHTML = "An online learning " + "platform for the neveropen around the globe."; } </script></body></html> |
Output:
Adding text to HTML elements using getElementsByName() method
Getting HTML elements by TagName: The getElementsByTagName() method in JavaScript s used to get the elements by tag name. In this method, we will pass the name of elements instead of the name attribute.
Syntax:
document.getElementsByTagName("Tag_Name");
Parameter: It also takes a string parameter as the name of the tag that the user wanted to access from an HTML document.
Return value: It returns an array of all the elements that are similar to the passed value inside the function.
Example:
HTML
<!DOCTYPE html><html lang="en"><body> <h2>Hey Geek!!</h2> <h2>Welcome To GFG</h2> <button onclick="addText()"> Change Text </button> <script> function addText() { var para = document.getElementsByTagName("h2"); para[0].innerHTML = "neveropen"; para[1].innerHTML = "A Computer Science Portal for Geeks."; } </script></body></html> |
Output:
Changing text of HTML elements using getElementsByTagName() method
Getting HTML elements by Id: The Id selectors are used to uniquely identify an HTML element in an HTML document. In General, An HTML element is provided with a unique id, and then users can use the getElementById() method to access the particular element by passing that id value into the method.
Syntax:
document.getElementById("Id_Name");
Parameter: It accepts a string value as a parameter to further identify the element in the HTML Document.
Return Value: It simply returns the element with an id value similar to the passed value.
Example:
HTML
<!DOCTYPE html><html lang="en"><body> <h2>Welcome To GFG</h2> <h2 id="GFG"></h2> <button onclick="addText()"> Add Text </button> <script> function addText() { var gfg = document.getElementById("GFG"); gfg.innerHTML = "A Computer Science Portal for Geeks."; } </script></body></html> |
Output:
Adding text to HTML elements using getElementById() method
Getting HTML element By Class Name: The class attribute is used to identify a group of several tags (may or may not be the same) uniquely in an HTML document. In JavaScript, You can use the getElementsByClassName() method to access the particular group.
Syntax:
document.getElementsByClassName("Class_Name");
Parameter: It accepts a string to identify the elements in the HTML document.
Return Value: It will return the group of all elements given the same class name.
Example:
HTML
<!DOCTYPE html><html lang="en"><body> <h2 class="neveropen"> Welcome To GFG </h2> <p class="neveropen"></p> <button onclick="addText()"> Change Text </button> <script> function addText() { var gfg = document.getElementsByClassName("neveropen"); gfg[0].innerHTML = "neveropen"; gfg[1].innerHTML = "A Computer Science Portal for Geeks."; } </script></body></html> |
Output:
Changing text of HTML elements using getElementsClassName() method
Getting HTML elements by CSS selectors: You can access the HTML elements in two ways using the CSS selectors:
Note: While calling these methods make sure that you are passing the CSS selector with its notation i.e. use ‘ . ‘ while passing a class parameter and use ‘ # ‘ in the case of id parameter.
Let’s Discuss them separately one by one:
- querySelector(): It will return the first HTML element that contains the specified CSS selector passed inside the method.
Syntax:
// In case of Class
document.querySelector(".className");
// In case of Id
document.querySelector("#idName");
Example: The example below illustrates the use of querySelector():
HTML
<!DOCTYPE html><html lang="en"><body> <h2 id="GFG">Welcome To GFG</h2> <p class="neveropen"></p> <h2 class="neveropen"></h2> <button onclick="addText()"> Display Text </button> <script> function addText() { var gfg1 = document.querySelector("#GFG"); var gfg2 = document.querySelector(".neveropen"); gfg1.innerHTML = "Hey Geek, Welcome to GFG"; gfg2.innerHTML = "A Computer Science Portal for Geeks."; } </script></body></html> |
Output:
Displaying content of HTML elements using querySelector() method
- querySelectorAll(): It will return all the HTML elements containing the specified CSS selector passed inside the method.
Syntax:
// In case of Class
document.querySelectorAll("#idName");
// In case of Id
document.querySelectorAll(".className");
Example: This example explains the use of querySelectorAll():
HTML
<!DOCTYPE html><html lang="en"><body> <h2 id="GFG"> Welcome To GFG </h2> <h2 class="neveropen"></h2> <p class="neveropen"></p> <button onclick="addText()"> Update Text </button> <script> function addText() { var gfg1 = document.querySelectorAll("#GFG"); var gfg2 = document.querySelectorAll(".neveropen"); gfg1[0].innerHTML = "Hey Geek, Welcome to GFG"; gfg2[0].innerHTML = "A Computer Science Portal for Geeks."; gfg2[1].innerHTML = "An Online learning platform for neveropen around the world."; } </script></body></html> |
Output:
Updating text of HTML elements using querySelectorAll() method
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Complete Reference article.
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
