Explain various methods for finding the HTML elements
Last Updated :
29 Jul, 2024
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 geeks around the globe.";
}
</script>
</body>
</html>
Output:
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 = "GeeksforGeeks";
para[1].innerHTML =
"A Computer Science Portal for Geeks.";
}
</script>
</body>
</html>
Output:
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:
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="GeeksforGeeks">
Welcome To GFG
</h2>
<p class="GeeksforGeeks"></p>
<button onclick="addText()">
Change Text
</button>
<script>
function addText() {
var gfg =
document.getElementsByClassName("GeeksforGeeks");
gfg[0].innerHTML = "GeeksforGeeks";
gfg[1].innerHTML =
"A Computer Science Portal for Geeks.";
}
</script>
</body>
</html>
Output:
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="GeeksforGeeks"></p>
<h2 class="GeeksforGeeks"></h2>
<button onclick="addText()">
Display Text
</button>
<script>
function addText() {
var gfg1 =
document.querySelector("#GFG");
var gfg2 =
document.querySelector(".GeeksforGeeks");
gfg1.innerHTML =
"Hey Geek, Welcome to GFG";
gfg2.innerHTML =
"A Computer Science Portal for Geeks.";
}
</script>
</body>
</html>
Output:
- 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="GeeksforGeeks"></h2>
<p class="GeeksforGeeks"></p>
<button onclick="addText()">
Update Text
</button>
<script>
function addText() {
var gfg1 =
document.querySelectorAll("#GFG");
var gfg2 =
document.querySelectorAll(".GeeksforGeeks");
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 geeks around the world.";
}
</script>
</body>
</html>
Output:
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. Â
Similar Reads
Explain various type of HTML DOM methods
There are some instances in which the HTML markup needs to be dynamically manipulated without actually changing the HTML source code. To achieve this, users can make use of a variety of HTML DOM methods present in JavaScript at their disposal. First, it is important to understand what the HTML Docum
6 min read
What are various heading elements used to add heading in HTML ?
An HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least. In this article, we will discuss various heading elements used to add a heading i
2 min read
Explain semantic elements in HTML5
In this article, we are going to learn about the semantic elements in HTML5. Semantic elements are the elements that describe their meaning to both the developer as well as to the browser. HTML5 provides us with many semantic elements as listed below:<article> tag: A article tag is used to spe
7 min read
How to find the position of HTML elements in JavaScript ?
In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is
3 min read
What are the various formatting tags available in HTML ?
As we know, HTML provides many predefined elements that are used to change the formatting of text. The formatting can be used to set the text styles (like – bold, italic, or emphasized, etc.), highlight the text, make text superscript and subscript, etc. In this article, we will discuss different fo
3 min read
HTML DOM contains() Method
The contains() method is used to find whether the specified node is a descendant of the given node. This descendant can be a child, grandchild, great-grandchild, and so on. Syntax: node.contains( otherNode ) Parameters: The “othernode†in the syntax is the parameter required in this function. Return
1 min read
Elements that are used in head section of HTML page
The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta inform
3 min read
Explain use of Meta tags in HTML
Meta Tag(<meta>) is a HTML component that gives the metadata about a HTML document. MetaData can be characterized as data that gives the data of different information or basic information about information. It is an empty tag, for example, it just has an initial tag and no end tag. They are al
4 min read
HTML DOM getElementsByClassName() Method
The getElementsByClassName() method in Javascript returns an object containing all the elements with the specified class names in the document as objects. Each element in the returned object can be accessed by its index. The index value will start with 0. This method can be called upon by any indivi
3 min read
HTML Text Formatting Elements
As we know, HTML provides many predefined elements that are used to change the formatting of text. The formatting can be used to set the text styles (like - bold, italic, or emphasized, etc.), highlight the text, make text superscript and subscript, etc. Text Formatting Elements: <b> and <s
3 min read