Different ways to access HTML elements using JavaScript
Last Updated :
13 Dec, 2023
Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Document Object Model). Here, the DOM is the structure of the web page.
From the DOM, users can access HTML elements in five different ways in JavaScript:
Get HTML element by Id
Generally, most developers use unique ids in the whole HTML document. The user has to add the id to the particular HTML element before accessing the HTML element with the id. Users can use getElementById() method to access the HTML element using the id. If any element doesn't exist with the passed id into the getElementById method, it returns the null value.
Syntax:
document.getElementById(element_ID);
Parameter:
It takes the ID of the element which the user wants to access.
Return value:
It returns the object with the particular ID. If the element with the particular ID isn't found, it returns the NULL value.
Example: This example demonstrates the use of the getElementsById method. Also, it prints the inner HTML of a returned object into the console of the browser. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Heading element with GeeksforGeeks id-->
<h1 id="Geeksforgeeks">
GeeksforGeeks
</h1>
<p>DOM getElementById() Method</p>
<script>
// Accessing the element by getElementById method
let temp = document.getElementById("Geeksforgeeks");
console.log(temp);
console.log(temp.innerHTML);
</script>
</body>
</html>
Output:
In javascript, the getElementsByClassName() method is useful to access the HTML elements using the className. The developers can use a single className multiple times in a particular HTML document. When users try to access an element using the className, it returns the collection of all objects that include a particular class.
Syntax:
document.getElementsByClassName(element_classnames);
Parameter:
It takes the multiple class names of the element which the user wants to access.
Return value:
It returns the collection of objects that have a particular class name. Users can get every element from the collection object using the index that starts from 0.
Example 1: This example demonstrates the use of the getElementsByClassName() method. It prints every element of the returned collection object into the console. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Multiple html element with GeeksforGeeks class name -->
<h1 class="GeeksforGeeks">GeeksforGeeks sample 1</h1>
<h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1>
<h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1>
<p>DOM getElementsByclassName() Method</p>
<script>
// Accessing the element by getElementsByclassName method
let temp = document.getElementsByClassName("GeeksforGeeks");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>
Output:
Example 2: If a particular element contains more than one class, users can access it by passing space-separated names of the classes as a parameter of the method. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Multiple html element with GeeksforGeeks class name -->
<h1 class="GeeksforGeeks geeks">GeeksforGeeks sample 1</h1>
<h1 class="GeeksforGeeks">GeeksforGeeks sample 2</h1>
<h1 class="GeeksforGeeks">GeeksforGeeks sample 3</h1>
<p>DOM getElementsByclassName() Method</p>
<script>
// Accessing the element by getElementsByclassName
// method with multiple class
let temp = document.getElementsByClassName(
"GeeksforGeeks geeks");
console.log(temp[0]);
</script>
</body>
</html>
Output:
In javascript, getElementsByName() method is useful to access the HTML elements using the name. Here, the name suggests the name attribute of the HTML element. This method returns the collection of HTML elements that includes the particular name. Users can get the length of the collection using the build-in length method.
Syntax:
document.getElementsByName(element_name);
Parameter:
It takes the name of the element which the user wants to access.
Return value:
It returns the collection of elements that have a particular name.
Example: This example demonstrates the use of the getElementsByName method. It prints every element with a particular name into the console. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Multiple html element with GeeksforGeeks name -->
<h1 name="GeeksforGeeks">GeeksforGeeks sample 1</h1>
<h1 name="GeeksforGeeks">GeeksforGeeks sample 2</h1>
<h1 name="GeeksforGeeks">GeeksforGeeks sample 3</h1>
<p>DOM getElementsByName() Method</p>
<script>
// Accessing the element by getElementsByName method
let temp = document.getElementsByName("GeeksforGeeks");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>
Output:
In javascript, getElementsByTagName() method is useful to access the HTML elements using the tag name. This method is the same as the getElementsByName method. Here, we are accessing the elements using the tag name instead of using the name of the element.
Syntax:
document.getElementsByTagName(Tag_name);
Parameter:
It takes a single parameter which is the tag name.
Return value:
It returns the collection of elements that includes the tag which passed as a parameter.
Example: This example demonstrates the use of the getElementsByTagName method. It prints every element with a particular tag into the console. Users can open the console in the Chrome web browser by pressing ctrl + shift + I.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Multiple html element with h1 tag -->
<h1>GeeksforGeeks sample 1</h1>
<h1>GeeksforGeeks sample 2</h1>
<h1>GeeksforGeeks sample 3</h1>
<p>DOM getElementsByTagName() Method</p>
<script>
// Accessing the element by
// getElementsByTagName method
let temp = document.getElementsByTagName("h1");
console.log(temp[0]);
console.log(temp[1]);
console.log(temp[2]);
</script>
</body>
</html>
Output:
Get HTML elements by CSS Selector
Users can select the HTML elements using the different CSS selectors such as class, id, and tag name at a single time. HTML elements can be retrieved using CSS selectors in two ways. The querySelector() method returns the first element that matches the particular CSS selector. The querySelectorAll() method returns all element that matches the particular CSS selector.
To use id/class as a parameter users have to add the '#'/'.' sign before it. Users can pass directly the tag name into the above 2 methods. Users don't need to separate CSS selectors when passing multiple CSS selectors as parameters.
Syntax:
document.querySelector(selectors);
document.querySelectorAll(selectors);
Parameter:
As a parameter, it accepts different CSS selectors such as class, tag name, and id.
Return value:
The querySelector() method returns the first object that matches the CSS selectors, while the querySelectorAll() method returns a collection of all objects that match the CSS selectors.
Example 1: This example demonstrates the use of the querySelector method. In the below, code we have used the different CSS selectors to access the HTML elements from the DOM.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- html element with classnames and id -->
<h1 class="gfg1" id="g1">GeeksforGeeks sample 1</h1>
<h1 class="gfg1" id="g2">GeeksforGeeks sample 2</h1>
<p class="gfg1">GeeksforGeeks sample 3</p>
<script>
// Accessing the element by class name
// using querySelector
let temp = document.querySelector(".gfg1");
console.log(temp);
// Accessing the element by id using querySelector
temp = document.querySelector("#g2");
console.log(temp);
// Accessing the element by class name and
// id using querySelector
temp = document.querySelector(".gfg1#g2");
console.log(temp);
// Accessing the element by tag name that
// includes the particular class
temp = document.querySelector("p.gfg1");
console.log(temp);
</script>
</body>
</html>
Output:
Example 2: This example demonstrates the use of the querySelectorAll method. The querySelectorAll() method returns the node list of all objects that match with the CSS selectors. Users can access all elements of the CSS node list using the index that starts from 0.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- html element with classnames and id -->
<h1 class="gfg1" id="g1">GeeksforGeeks sample 1</h1>
<h1 class="gfg1" id="g2">GeeksforGeeks sample 2</h1>
<p class="gfg1">GeeksforGeeks sample 3</p>
<p class="gfg1">GeeksforGeeks sample 4</p>
<script>
// Accessing the element by class name, id and
// tag name using querySelectorAll
let temp = document.querySelectorAll("h1.gfg1#g2");
console.log(temp[0]);
// Accessing the element by tag name using
// querySelectorAll
temp = document.querySelectorAll("p");
console.log(temp[0]);
console.log(temp[1]);
</script>
</body>
</html>
Output:
Similar Reads
How to replace an HTML element with another one using JavaScript? Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st
2 min read
Manipulating HTML Elements with JavaScript JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man
5 min read
HTML content modification using JavaScript JavaScript is the dynamic, lightweight, and most common computer programming language used to create web pages. It interacts with client-side and makes dynamic pages. JavaScript Can Change the Content of an HTML page. The getElementById() method is used to get the id of the element and change the HT
2 min read
How to Access <tr> element from Table using JavaScript ? Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want. Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already
2 min read
How to get the text without HTML element using JavaScript ? Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below: Using innerText propertyUsing textContent property Using innerText property: We can use innerTex
1 min read
How to create an element from a string in JavaScript ? In this article, we will learn how to create an element from a string using JavaScript. This can be used in situations where dynamically generated elements are required by the user. This can be achieved using many approaches as given below: Table of Content Using the createElement() methodUsing the
3 min read
How to get/change the HTML with DOM element in JavaScript ? In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an
3 min read
How to Get Value by Class Name using JavaScript ? This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access th
2 min read
How to Access Document Properties using W3C DOM ? In this article, we'll learn about W3C DOM document properties, their methods for manipulating documents, and how they work in practice. The World Wide Web Consortium, or WWW has established the document object model, which enables entry to and modification of every piece of document information (W3
4 min read
How to get the child element of a parent using JavaScript ? Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. Below are the approaches to get the child element of a parent using JavaScript:Table of ContentBy using the children propertyBy using the querySelector
3 min read