getElementById vs querySelector in JavaScript

Introduction:

In this tutorial, you will clear the concept of getElementById vs querySelector in JavaScript.

Selecting elements is one of the most common tasks when you are working with the DOM in JavaScript. Two popular methods developers use are:

1. getElementById()
2. querySelector()

What is getElementById?

getElementById() is a DOM method that selects an element based on its id attribute.

Syntax:

document.getElementById("elementId");

Example:

<p id="title">Hello World</p>
<script>
  const element = document.getElementById("title");
  console.log(element.textContent);
</script>

What is querySelector?

querySelector() was introduced in modern DOM APIs. It allows selecting elements using CSS selectors.

Syntax

document.querySelector("CSS selector");

Example

<p id="title">Hello World</p>
<script>
  const element = document.querySelector("#title");
  console.log(element.textContent);
</script>

You can also select by:

document.querySelector(".className");

document.querySelector("div p");

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

Important Points:

1. It uses CSS selectors

2. It returns the first matching element

3. It is more flexible.

4. It is slightly slower than getElementById.

getElementById vs querySelector (Comparison Table)

Feature	getElementById()	querySelector()
Selector Type	ID only	Any CSS selector
Returns	Single Element	First Matching Element
Performance	Faster	Slightly slower
Flexibility	Limited	Very Flexible
Browser Support	Very Old Browsers	Modern Browsers

Performance Difference

getElementById() is slightly faster than querySelector().

When should you use getElementById or querySelector?

Use getElementById:

1. When you only need to select by ID.
2. When performance is critical.

Use querySelector:

1. When you need complex selectors.
2. When you want a class, attribute, or nested selection.
3. When you prefer modern, consistent syntax.

Common Beginner Mistakes

Sometimes Developers make mistakes, so please avoid this.

1 . Forgetting # in querySelector

document.querySelector("title"); // Wrong
document.querySelector("#title"); // Correct

2 . Using getElementById with

document.getElementById("#title"); // Wrong
document.getElementById("title");  // Correct

Real-Life Example: Login Form Validation

One common real-world use of DOM element selection is form validation.

For example, when a user submits a login form, JavaScript checks whether the input fields are empty or not.

HTML

<input type="text" id="username" placeholder="Enter username">
<button onclick="checkLogin()">Login</button>
<p id="message"></p>

JavaScript using getElementById()

function checkLogin() {
  const username = document.getElementById("username").value;

  if (username === "") {
    document.getElementById("message").textContent = "Username is required!";
  } else {
    document.getElementById("message").textContent = "Login successful!";
  }
}

JavaScript using querySelector()

function checkLogin() {
  const username = document.querySelector("#username").value;

  if (username === "") {
    document.querySelector("#message").textContent = "Username is required!";
  } else {
    document.querySelector("#message").textContent = "Login successful!";
  }
}

Explanation

1. The user enters a username in the input field.
2. When the Login button is clicked, the checkLogin() function runs.
3. JavaScript selects the input element using either:
   • getElementById() or
   • querySelector()
4. If the input is empty, JavaScript shows an error message.
5. Otherwise, it shows a success message.

Interview Questions

Conclusion

Both are the most important methods for selecting elements in the DOM.

getElementById() is simple and very fast when selecting elements by ID.

querySelector() is more flexible because it supports CSS selectors.