JavaScript Document getElementById() Method

What You’ll Learn

document.getElementById() is an instance method that returns the Element whose id matches a string (see MDN Document: getElementById()). Learn the id parameter, null when missing, case sensitivity, why spelling is Id (not ID), how it compares to querySelector, and five try-it labs.

Introduction

Almost every beginner DOM demo starts here: give an element an id, then grab it with document.getElementById("..."). Because IDs should be unique in a document, this is a fast, clear way to reach one specific node.

MDN: the method returns an Element whose id property matches the specified string. If you need an element without an ID, use querySelector() with any CSS selector instead.

Related tutorials: createElement(), getAnimations(), getElementsByClassName().

Understanding document.getElementById()

An instance method on the global document object (MDN Document interface).

• id — case-sensitive string unique within the document (MDN).
• Return value — matching Element, or null if not found (MDN).
• Uniqueness — IDs should be unique; if duplicates exist, the first match is returned (MDN).
• Spelling — must be getElementById; getElementByID is invalid (MDN).
• Document only — not available on arbitrary element objects (MDN usage notes).
• In-tree only — elements not yet inserted into the document are not found (MDN).

📝 Syntax

General form of Document.getElementById (MDN):

getElementById(id)

Parameters

• id — the ID of the element to locate. Case-sensitive string; only one element should have any given ID (MDN).

Return value

An Element matching the specified ID, or null if no matching element was found (MDN).

Capitalization note (MDN)

The letters Id must be spelled exactly that way. getElementByID() will not work, even though it looks natural.

MDN color-change example

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    changeColor(event.target.textContent.toLowerCase());
  });
});

⚖️ getElementById vs querySelector

Examples Gallery

Examples follow MDN Document: getElementById() and practical beginner patterns.

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    changeColor(event.target.textContent.toLowerCase());
  });
});

Paragraph text turns blue or red
(depending on which button you click)

const el = document.getElementById("missing");
if (el) {
  console.log(el.textContent);
} else {
  console.log("no element with that id");
}

no element with that id

// HTML: 
Hello
console.log(document.getElementById("main") !== null); // true
console.log(document.getElementById("Main") !== null); // false

true
false

const element = document.createElement("div");
element.id = "test";
console.log(document.getElementById("test")); // null

document.body.appendChild(element);
console.log(document.getElementById("test") !== null); // true

null
true

const byId = document.getElementById("hero");
const bySel = document.querySelector("#hero");
console.log(byId === bySel); // true when both find the same node

true

🚀 Common Use Cases

• Form fields — read value from #email / #password.
• UI updates — change text or class on a status banner.
• Event wiring — attach listeners to a known button id.
• Tutorial demos — the simplest way to connect HTML and JavaScript.
• Not class lookups — use querySelector / getElementsByClassName.
• Not local searches — MDN: no element-level getElementById.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• MDN: spelling is getElementById — not getElementByID.
• MDN: id matching is case-sensitive.
• MDN: available on document, not on every element.
• MDN: detached nodes (created but not inserted) are not found.
• Related: createElement(), getAnimations(), getElementsByClassName().

💡 Best Practices