This Angular tutorial helps you get started with Angular quickly and effectively through many practical examples.

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:

  1.  getElementById() Method
  2. getElementsByClassName() Method
  3. getElementsByTagName() Method
  4. querySelector() Method
  5. 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

javascript DOM Selectors

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

javascript DOM Selectors

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

javascript DOM Selectors

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

javascript DOM Selectors

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

javascript DOM Selectors

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