JavaScript DOM Selectors
In this tutorial, you will see some methods which are used for selecting the elements on a page and do something with them using the JavaScript. In JavaScript, you can use DOM selectors to select and manipulate elements on a web page.
Here, are some commonly used DOM selectors:
- getElementById() Method
- getElementsByClassName() Method
- getElementsByTagName() Method
- querySelector() Method
- querySelectorAll() Method
1. getElementById() Method
This method is used to select an element with a specific ID. It takes one argument, which is the ID of the element you want to select.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Selectors Example</title>
</head>
<body>
<h2>TutorilsTrend - JavaScript DOM Selectors Example</h2>
<h1 id="title"></h1>
<script>
// Get the element with ID "title"
document.getElementById("title").innerHTML = "Tutorial Site";
</script>
</body>
</html>Output
2. getElementsByClassName() Method
This method is used to select all elements with a specific class name. It takes one argument, which is the class name of the elements you want to select. It returns an array-like object called a NodeList.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Selectors Example</title>
</head>
<body>
<h2>TutorilsTrend - JavaScript DOM Selectors Example</h2>
<h1 class="content">Tutorials</h1>
<h1 class="content">TutorialsTrend</h1>
<script>
// Get all elements with class "content"
const contentElements = document.getElementsByClassName("content");
for (let i = 0; i < contentElements.length; i++) {
document.write(contentElements[i].textContent + "</br>");
}
</script>
</body>
</html>Output
3. getElementsByTagName() Method
This method is used to select all elements with a specific tag name. It takes one argument, which is the tag name of the elements you want to select. It also returns a NodeList.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Selectors Example</title>
</head>
<body>
<h2>TutorilsTrend - JavaScript DOM Selectors Example</h2>
<h1>Tutorials</h1>
<h1>TutorialsTrend.com</h1>
<script>
// Get all <p> elements
const pElements = document.getElementsByTagName("h1");
for (let i = 0; i < pElements.length; i++) {
document.write(pElements[i].textContent + "</br>");
}
</script>
</body>
</html>Output
4. querySelector() Method
This method is used to select the first element that matches a specific CSS selector. It takes one argument, which is the CSS selector of the element you want to select. It returns the first matching element.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Selectors Example</title>
</head>
<body>
<h2>TutorilsTrend - JavaScript DOM Selectors Example</h2>
<h1 class="content">Tutorials</h1>
<h1 class="content">TutorialsTrend.com</h1>
<script>
// Get the first element with class "content"
const firstContent = document.querySelector(".content");
document.write(firstContent.textContent + "</br>");
</script>
</body>
</html>Output
5. querySelectorAll() Method
This method is used to select all elements that match a specific CSS selector. It takes one argument, which is the CSS selector of the elements you want to select. It returns a NodeList.
Example
<!DOCTYPE html>
<html>
<head>
<title>DOM Selectors Example</title>
</head>
<body>
<h2>TutorilsTrend - JavaScript DOM Selectors Example</h2>
<h1 class="content">Tutorials</h1>
<div>
<h1
class="content">TutorialsTrend.com</h1></div>
<script>
// Get all elements
with class "content" that are inside a <div>
const divContentElements =
document.querySelectorAll("div .content");
for (let i = 0; i <
divContentElements.length; i++) {
document.write(divContentElements[i].textContent + "</br>");
}
</script>
</body>
</html>Output
These are just a few examples of the many DOM selectors available in JavaScript. By using these selectors, you can easily access and manipulate elements on a web page.
Prev Next