Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to access HTML elements in JavaScript?
In JavaScript, accessing HTML elements is fundamental for creating dynamic web pages. The Document Object Model (DOM) provides several methods to select and manipulate HTML elements based on different criteria.
Get HTML element by Id
Get HTML element by className
Get HTML element by Name
Get HTML element by tagName
Get HTML element by CSS Selector
Get HTML element by Id
The getElementById() method retrieves a single element using its unique ID attribute. This is the most efficient way to access a specific element since IDs must be unique within a document.
Syntax
document.getElementById(element_ID);
Parameter ? It takes the element id as a string parameter.
Return value ? Returns the element object with the specified ID, or null if no element exists with that ID.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementById() Method</title>
</head>
<body>
<h1 id="elementId" style="color: green;">
Welcome To Tutorials Point
</h1>
<p>DOM getElementById() Method</p>
<script>
// Accessing the element by getElementById method
var element = document.getElementById("elementId");
console.log(element);
console.log(element.innerHTML);
// Modify the element
element.style.color = "blue";
element.innerHTML = "Content Changed!";
</script>
</body>
</html>
Get HTML element by className
The getElementsByClassName() method returns a collection of elements that have the specified class name. This method is useful when you want to select multiple elements with the same styling or behavior.
Syntax
document.getElementsByClassName(classnames);
Parameter ? Takes one or more class names separated by spaces.
Return value ? Returns an HTMLCollection of elements with the specified class name(s).
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByClassName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<p class="highlight">Tutorials Point #1</p>
<p class="highlight">Tutorials Point #2</p>
<p class="highlight">Tutorials Point #3</p>
<script>
// Accessing elements by class name
var elements = document.getElementsByClassName("highlight");
console.log("Found " + elements.length + " elements");
// Loop through all elements
for(let i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML);
elements[i].style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Get HTML element by Name
The getElementsByName() method selects elements based on their name attribute. This is commonly used with form elements like input fields, radio buttons, and checkboxes.
Syntax
document.getElementsByName(element_name);
Parameter ? Takes the name attribute value as a string.
Return value ? Returns a NodeList of elements with the specified name attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<input type="text" name="userInput" value="Input 1">
<input type="text" name="userInput" value="Input 2">
<input type="text" name="userInput" value="Input 3">
<script>
// Accessing elements by name attribute
var inputs = document.getElementsByName("userInput");
console.log("Found " + inputs.length + " input elements");
// Access each input
for(let i = 0; i < inputs.length; i++) {
console.log("Input " + (i+1) + ": " + inputs[i].value);
}
</script>
</body>
</html>
Get HTML elements by TagName
The getElementsByTagName() method returns all elements with the specified tag name. This is useful for selecting all elements of a particular type, like all paragraphs or all images.
Syntax
document.getElementsByTagName(Tag_name);
Parameter ? Takes the HTML tag name as a string.
Return value ? Returns an HTMLCollection of all elements with the specified tag name.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM getElementsByTagName() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<script>
// Accessing all paragraph elements
var paragraphs = document.getElementsByTagName("p");
console.log("Found " + paragraphs.length + " paragraphs");
// Style all paragraphs
for(let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.border = "1px solid red";
console.log("Paragraph " + (i+1) + ": " + paragraphs[i].innerHTML);
}
</script>
</body>
</html>
Get HTML elements by CSS Selector
Modern JavaScript provides two powerful methods for selecting elements using CSS selectors: querySelector() returns the first matching element, while querySelectorAll() returns all matching elements.
Syntax
document.querySelector(selectors); document.querySelectorAll(selectors);
Parameter ? Accepts CSS selectors like classes (.className), IDs (#idName), tags, attributes, and complex combinations.
Return value ? querySelector() returns the first matching element or null. querySelectorAll() returns a NodeList of all matching elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM querySelector() Method</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<h2 class="content" id="header1">Header 1</h2>
<h2 class="content" id="header2">Header 2</h2>
<p class="content">Paragraph content</p>
<script>
// Select first element with class "content"
var firstContent = document.querySelector(".content");
console.log("First content:", firstContent.innerHTML);
// Select element by ID
var header2 = document.querySelector("#header2");
console.log("Header 2:", header2.innerHTML);
// Select all elements with class "content"
var allContent = document.querySelectorAll(".content");
console.log("All content elements:", allContent.length);
// Complex selector: h2 elements with class "content"
var h2Content = document.querySelectorAll("h2.content");
console.log("H2 with content class:", h2Content.length);
</script>
</body>
</html>
Comparison of Methods
| Method | Returns | Performance | Use Case |
|---|---|---|---|
| getElementById() | Single element | Fastest | Unique elements |
| getElementsByClassName() | HTMLCollection | Fast | Multiple elements by class |
| getElementsByTagName() | HTMLCollection | Fast | All elements of same type |
| querySelector() | Single element | Moderate | Complex CSS selections |
| querySelectorAll() | NodeList | Moderate | Multiple complex selections |
Conclusion
JavaScript provides multiple ways to access HTML elements, each suited for different scenarios. Use getElementById() for single elements, getElementsByClassName() or getElementsByTagName() for collections, and querySelector() methods for complex CSS-based selections.
19K+ Views
