JavaScript DOM: getElementById() vs querySelector()

JavaScript DOM: getElementById() vs querySelector()

By /

The Document Object Model (DOM) is a tree-like structure that represents all the elements of a web page. JavaScript interacts with this structure to read, modify, or create elements dynamically. Selecting the right elements from the DOM is often the first step in making a page interactive. Two of the most common ways to select elements are getElementById() and querySelector(). Both methods allow you to grab HTML elements, but they work a little differently and have unique uses.

Understanding these methods will help you manipulate the page with precision and fun. This article explores how to use both getElementById() and querySelector() to select elements on a webpage. Through lively examples, you will see their syntax, how they handle selectors, and what makes each one special.

Using getElementById()

The getElementById() method is one of the simplest and oldest ways to grab a DOM element. As the name suggests, it selects a single element by its unique id attribute. Since an id should only be used once per page, getElementById() always returns only one element or null if none exists.

Let’s look at a colorful example where we select a fruit element by its ID and change its text and style:

<!DOCTYPE html>
<html>
<head>
  <title>getElementById Example</title>
</head>
<body>

  <div id="fruit">Apple</div>

  <script>

    // Select the element with ID 'fruit'
    const fruit = document.getElementById('fruit');

    // Change the text inside the div
    fruit.textContent = 'Mango';

    // Add some color styling to make it stand out
    fruit.style.color = 'orange';

    console.log('Fruit updated to Mango with orange color');

  </script>

</body>
</html>

In this snippet, document.getElementById('fruit') finds the <div> with the ID fruit. We then update the text content to say “Mango” and change the text color to orange. The console message confirms the change happened. This method is perfect for quick access to unique elements like headers, buttons, or containers that have a single id.

You can also add event listeners easily:

<!DOCTYPE html>
<html>
<head>
  <title>getElementById Event</title>
 </head>
<body>

  <button id="magicButton">Click Me!</button>

  <script>

    const button = document.getElementById('magicButton');

    // Add a click event that changes the button text
    button.addEventListener('click', () => {

      button.textContent = 'Clicked!';
      button.style.backgroundColor = 'purple';

    });

  </script>

</body>
</html>

Here, clicking the button triggers an event that updates its text and background color. The event is added simply by selecting the element by ID first.

Using querySelector()

While getElementById() is limited to selecting by one unique ID, querySelector() offers much more power. It selects the first element that matches any valid CSS selector — whether that’s an ID, a class, a tag, or even a complex selector combining them.

For example, to select the same fruit by ID with querySelector(), you write:

const fruit = document.querySelector('#fruit');

Here’s a fun example selecting a magic potion by its class name and updating it:

<!DOCTYPE html>
<html>
<head>
  <title>querySelector Example</title>
</head>
<body>

  <div class="potion">Invisibility</div>
  <div class="potion">Healing</div>

  <script>

    // Select the first element with class 'potion'
    const potion = document.querySelector('.potion');

    // Change background and text content
    potion.style.backgroundColor = 'lightblue';
    potion.textContent = 'Flying Potion';

    console.log('First potion changed to Flying Potion');

  </script>

</body>
</html>

Here, querySelector('.potion') picks the first element with class potion, ignoring the second. We give it a soft blue background and change the text to “Flying Potion.” This flexibility means you can select nearly anything with CSS selectors.

Adding an event listener is just as easy:

<!DOCTYPE html>
<html>
<head>
  <title>querySelector Event</title>
</head>
<body>

  <div class="magic">Wave me!</div>

  <script>

    const magic = document.querySelector('.magic');

    magic.addEventListener('click', () => {

      magic.textContent = 'You waved!';
      magic.style.color = 'green';

    });

  </script>

</body>
</html>

Clicking the magic div changes its text and color, just like with getElementById().

Differences in Usage Syntax

The main syntax difference between these methods is how you specify the selector. getElementById() takes only an ID string without the #, like this:

document.getElementById('header');

Whereas querySelector() uses CSS selector syntax, including the # for IDs:

document.querySelector('#header');

This also applies to other selectors. For example, selecting by class requires a . prefix with querySelector():

document.querySelector('.special');

While getElementById() cannot select by class or tag, querySelector() can handle any CSS selector, like tags or attributes:

document.querySelector('input[type="checkbox"]');

Here’s an example selecting the first list item by tag name:

<!DOCTYPE html>
<html>
<head>
  <title>Selector Syntax</title>
</head>
<body>

  <ul>
    <li>Apple</li>
    <li>Banana</li>
  </ul>

  <script>

    const firstItem = document.querySelector('li');
    firstItem.style.fontWeight = 'bold';

  </script>

</body>
</html>

This code makes the first <li> bold, demonstrating how you can select by tag with querySelector().

Selecting Multiple Elements with querySelectorAll()

querySelectorAll() is a close sibling of querySelector(). Instead of grabbing just the first match, it returns a static list (NodeList) of all matching elements. This is useful when you want to manipulate multiple elements with the same class, tag, or attribute.

For example, let’s select all buttons with the class action and change their colors:

<!DOCTYPE html>
<html>
<head>
  <title>querySelectorAll Example</title>
</head>
<body>

  <button class="action">Save</button>
  <button class="action">Cancel</button>
  <button class="action">Delete</button>

  <script>

    // Select all buttons with class 'action'
    const buttons = document.querySelectorAll('.action');

    // Loop through each button and update style
    buttons.forEach((button, index) => {

      button.style.backgroundColor = ['lightcoral', 'lightseagreen', 'lightgoldenrodyellow'][index];

    });

    console.log('All action buttons colored');

  </script>

</body>
</html>

The colors change across all three buttons. querySelectorAll() gives you a handy list to loop through using forEach() or a traditional for loop.

You can also add events to multiple elements:

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Event Listeners</title>
</head>
<body>

  <button class="clickable">Button 1</button>
  <button class="clickable">Button 2</button>

  <script>

    const clickableButtons = document.querySelectorAll('.clickable');

    clickableButtons.forEach(button => {

      button.addEventListener('click', () => {
        alert(button.textContent + ' was clicked!');
      });

    });

  </script>

</body>
</html>

Now, clicking either button will show an alert with the button’s label.

When to Use Each

Choosing between getElementById() and querySelector() depends on your selector needs. If you want a unique element by its ID, getElementById() is direct and simple:

document.getElementById('header').style.color = 'blue';

However, when you want to select elements with classes, attributes, or tags — or the first matching element for a complex selector — querySelector() shines:

document.querySelector('.highlight').style.backgroundColor = 'yellow';

For selecting many elements sharing a class or tag, use querySelectorAll():

document.querySelectorAll('.item').forEach(item => {
  item.style.fontSize = '18px';
});

This example changes the font size of all elements with class item.

Conclusion

This article walked you through selecting DOM elements with getElementById() and querySelector(). You saw how getElementById() targets unique IDs directly and simply, while querySelector() lets you use any CSS selector to find the first matching element. You also learned about querySelectorAll() for grabbing multiple elements at once. With lively examples featuring fruits, potions, buttons, and lists, you now have clear hands-on knowledge to select and manipulate page elements in many fun ways. Try mixing selectors and adding event listeners to see these methods in action!

References

If you’re curious to explore further or want to double-check what you’ve learned, these trusted documentation pages offer more detailed explanations and examples:

Related Posts

Scroll to Top