How to Use getElementById in JS: Complete Guide

The getElementById method is the direct way to grab a single DOM element when you know its id attribute. Give it a string, and it returns the one element with that exact ID, or null if nothing on the page matches.

html

<h1 id="main-heading">Welcome</h1>

Give the ID string to the method and it returns the matching element. Here is the call and what it prints:

javascript

const heading = document.getElementById("main-heading");
console.log(heading.textContent);

The output is "Welcome." This is the fastest DOM selection method. Browsers keep an internal lookup table that maps every ID directly to its element. No tree traversal, no CSS parsing, just a direct lookup.

Syntax and Return Value

This section breaks down the exact signature so you know what to pass in and what you get back. Getting the parameter and return type clear up front avoids confusion in every example that follows.

javascript

const element = document.getElementById(idString);

The single parameter is a string that must match the value of an id attribute somewhere on the page. The matching is case-sensitive, so "Main-Heading" and "main-heading" are treated as different IDs entirely.

If the ID exists, you get an Element object to read from or change. If not, you get null. This null case causes most bugs with the method, so the next section covers the guard pattern to prevent those crashes.

Always Check for Null

If the ID does not exist, the method returns null. Accessing a property on null throws a TypeError that crashes your script immediately. Always guard the result before using it.

javascript

const sidebar = document.getElementById("sidebar");
sidebar.classList.add("open");

If no element has the ID "sidebar," that second line crashes with a TypeError. Always guard with an if-check before using the result:

javascript

const sidebar = document.getElementById("sidebar");
if (sidebar) {
  sidebar.classList.add("open");
}

This pattern is not optional. Use it whenever the element might not be on the page, which means almost always.

Page structure varies between routes, and elements can load dynamically. Shared components cannot guarantee every ID exists. The null guard costs one line and prevents an entire category of runtime errors.

IDs Must Be Unique

The HTML specification requires every id value to be unique within a page. This method relies on that rule to return exactly one element. If you accidentally reuse an ID, the browser returns the first element it finds:

html

<div id="card">First card</div>
<div id="card">Second card</div>

Even though two elements share the same ID, the method can only return one. The browser stops at the first match it encounters while parsing:

javascript

const card = document.getElementById("card");
console.log(card.textContent);

The output is "First card". The second div is effectively unreachable by ID.

Browser behavior is technically undefined when IDs collide, so different browsers might handle it differently. The safe approach is to treat duplicate IDs as a bug and fix them.

Practical Examples

Here are three common patterns that show how this method fits into real code. Each example follows the null-guard pattern shown above.

Show and hide an overlay

javascript

const modal = document.getElementById("modal-overlay");
const openBtn = document.getElementById("open-modal");
const closeBtn = document.getElementById("close-modal");
 
openBtn.addEventListener("click", () => {
  modal.classList.add("visible");
});

The open button adds a CSS class that makes the modal appear. The close button does the reverse, removing that same class:

javascript

closeBtn.addEventListener("click", () => {
  modal.classList.remove("visible");
});

Three elements, each found by ID, wired into a simple show/hide pattern. The modal variable is declared once and reused across both event listeners.

Read what a user typed

javascript

const emailInput = document.getElementById("email");
const submitBtn = document.getElementById("submit");
 
submitBtn.addEventListener("click", () => {
  const emailValue = emailInput.value;
  console.log("Email entered:", emailValue);
});

The method gives you direct access to the input element. The value property reads whatever the user typed into that field at the moment the click handler runs.

Case Sensitivity Matters

IDs are case-sensitive in HTML and therefore in this method. A mismatch in casing gives you null instead of the element:

html

<h1 id="main-heading">Hello</h1>

The ID uses lowercase letters, but case mismatches are a frequent source of bugs. Watch what happens when you get the casing wrong:

javascript

document.getElementById("Main-Heading");  // null -- wrong case
document.getElementById("main-heading");  // the h1 element -- correct

If you are getting null for an ID you are certain exists on the page, check the casing character by character. The browser's internal lookup does an exact string match.

Choosing Between This and querySelector

Both methods can select by ID, so which should you use?

Use this method when you are selecting by ID. It is faster, and the name tells the reader exactly what is happening.

Use querySelector when you need any other kind of CSS selector, like a class, attribute, or complex combination. For a broader view of all selection methods, see how to select DOM elements.

Where to Go Next

When you need more flexible selection with CSS selectors, learn how to use querySelector and querySelectorAll. If you are new to the DOM overall, start with what the DOM is to understand the tree you are selecting from.