Skip to content
10x Tech Infinity

Understanding DOM Selectors in JavaScript: A Beginner's Guide with Examples

When working with web pages using JavaScript, one of the most common tasks is selecting HTML elements to manipulate them. The Document Object Model (DOM) provides several methods to select elements. Let’s explore these methods using a simple HTML structure and JavaScript code, along with their corresponding outputs.

Our HTML Structure

First, let’s look at the HTML we’ll be working with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM SELECTOR 1</title>
    <script src="./1DOM-SELECTOR.JS" defer></script>
  </head>
  <body>
    <h1 id="main-id" class="main-class">
      Manage your tasks <span style="display: none">Hello</span>
    </h1>
    <h1 class="main-class">
      Manage your code <span style="display: none">Hello</span>
    </h1>
  </body>
</html>

This HTML creates two <h1> elements, each with a class of “main-class”. The first <h1> also has an id of “main-id”.

JavaScript DOM Selectors

Now, let’s explore different ways to select these elements using JavaScript, along with their outputs.

Method 1: Traditional Selectors

getElementById

const elementID = document.getElementById("main-id");
console.dir(elementID);

Output:

 <h1 id="main-id" class="main-class"><h1 id="main-id" class="main-class">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This selects the element with the id “main-id”. It returns a single element.

getElementsByClassName

const elementClass = document.getElementsByClassName("main-class");
console.dir(elementClass);

Output:

 HTMLCollection(2) [h1#main-id.main-class, h1.main-class]

This selects all elements with the class “main-class”. It returns an HTMLCollection containing both <h1> elements.

getElementsByTagName

const elementTag = document.getElementsByTagName("h1");
console.dir(elementTag);

Output:

 HTMLCollection(2) [h1#main-id.main-class, h1.main-class]

This selects all <h1> elements. It returns an HTMLCollection containing both <h1> elements.

Method 2: Query Selectors

querySelector with ID

const elementQID = document.querySelector("#main-id");
console.dir(elementQID);

Output:

 <h1 id="main-id" class="main-class"><h1 id="main-id" class="main-class">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This selects the first element that matches the CSS selector “#main-id”.

querySelector with Class

const elementQCLASS = document.querySelector(".main-class");
console.dir(elementQCLASS);

Output:

 <h1 id="main-id" class="main-class"><h1 id="main-id" class="main-class">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This selects the first element with the class “main-class”.

querySelector with Tag Name

const elementQTAG = document.querySelector("h1");
console.dir(elementQTAG);

Output:

 <h1 id="main-id" class="main-class"><h1 id="main-id" class="main-class">
    Manage your tasks
    <span style="display: none">Hello</span>
</h1>

This selects the first <h1> element.

Method 3: querySelectorAll

querySelectorAll with Class

const elementAQCLASS = document.querySelectorAll(".main-class");
console.dir(elementAQCLASS);

Output:

 NodeList(2) [h1#main-id.main-class, h1.main-class]

This selects all elements with the class “main-class”. It returns a NodeList containing both <h1> elements.

querySelectorAll with Tag Name

const elementAQTAG = document.querySelectorAll("h1");
console.dir(elementAQTAG);

Output:

 NodeList(2) [h1#main-id.main-class, h1.main-class]

This selects all <h1> elements. It returns a NodeList containing both <h1> elements.

Key Differences

  1. getElementById returns a single element, while getElementsByClassName and getElementsByTagName return live HTMLCollections.
  2. querySelector returns the first matching element, while querySelectorAll returns all matching elements as a NodeList.
  3. querySelector and querySelectorAll use CSS selector syntax, making them more flexible.
  4. HTMLCollections are live, meaning they update automatically if the DOM changes, while NodeLists are static snapshots.

[IMAGE PLACEHOLDER: Comparison chart of different selector methods]

Conclusion

Understanding these DOM selectors is crucial for effective JavaScript DOM manipulation. Each method has its use cases:

  • Use getElementById when you need a single, unique element.
  • Use getElementsByClassName or getElementsByTagName when you need a live collection of elements.
  • Use querySelector for flexible, CSS-style selection of a single element.
  • Use querySelectorAll when you need all matching elements and don’t need a live collection.

Practice using these selectors to become proficient in DOM manipulation, a key skill for dynamic web development. Remember to consider the performance implications of each method, especially when working with large DOMs or frequently changing content.

Happy Learning!