getElementById vs. querySelector: Which Should You Use?

Published on: by Dr. Talib

To manipulate an element with JavaScript, you first have to select it. For years, getElementById() was the standard, but the modern querySelector() is more powerful and flexible. This guide explains the key differences to help you choose the right tool for the job.

document.getElementById()

How it works: This is the classic method. It's fast, simple, and does exactly one thing: it searches the entire document for the single element with a matching ID.

  • Argument: It takes a string of the ID name *without* the `#` character.
  • Return Value: It returns a single DOM element object, or null if no element is found.

Example Usage:

<div id="main-content">Some text here.</div>

<script>
  // Select the element by its ID 'main-content'
  const mainDiv = document.getElementById('main-content');

  // Now we can change its style
  mainDiv.style.color = 'red';
</script>

Pro: It is extremely fast and well-supported in all browsers, even very old ones. It's perfectly fine to use when you need to grab a unique element by its ID.

document.querySelector()

How it works: This is the modern, more powerful selector. It can find an element using *any valid CSS selector*, not just an ID. This includes selecting by class, attribute, or complex combinations.

  • Argument: It takes a string containing a full CSS selector, including the `.` for classes and `#` for IDs.
  • Return Value: It returns the *first* matching element it finds, or null if no match is found.

Example Usage:

<div class="card">
  <h2 class="card-title">My Card</h2>
  <p>Some content.</p>
</div>

<script>
  // Select the FIRST element that matches the CSS selector '.card .card-title'
  const titleElement = document.querySelector('.card .card-title');

  titleElement.style.textDecoration = 'underline';
</script>

Try it Yourself: Paste this into the HTML Viewer. The power here is that you can use the same selectors you already know from CSS, making it very intuitive.

What about selecting multiple elements?

This is where the difference becomes even clearer. getElementById can only ever get one thing (or nothing). To get multiple elements, you need the "All" versions.

  • The Old Way: document.getElementsByClassName('item') or document.getElementsByTagName('li'). These work, but they return a "live" HTMLCollection, which can sometimes be confusing.
  • The Modern Way: document.querySelectorAll('.item'). This is the companion to querySelector. It returns a static NodeList containing *all* matching elements. You can then loop over this list easily with methods like .forEach().

Example of `querySelectorAll`:

<ul>
  <li class="list-item">One</li>
  <li class="list-item">Two</li>
  <li class="list-item">Three</li>
</ul>

<script>
  // Select all elements with the class 'list-item'
  const allItems = document.querySelectorAll('.list-item');

  // Loop through each one and add a style
  allItems.forEach(item => {
    item.style.color = '#4f46e5';
  });
</script>

Conclusion: Which Should You Use?

For modern development, **`querySelector` and `querySelectorAll` are generally preferred.** They provide a single, consistent, and powerful API for selecting any element or group of elements using the CSS selector syntax you already know.

While getElementById is slightly faster in performance benchmarks, the difference is negligible for almost all real-world applications. The flexibility and consistency of querySelector make it the better choice for most situations.