document.getElementById()

var element = document.getElementById("id");

Returns the HTML element (an Element object) with the specified ID. If no matching element is found, returns null.

<h1 id="fighter-name">Yagami Iori</h1>
<p id="fighter-style">Yagami-ryu Old Fighting Style</p>
<p id="fighter-age">20</p>
<button id="btn-update">Update Info</button>

This produces the following output:

// Pattern 1: Get text content
var nameEl = document.getElementById("fighter-name");
console.log(nameEl.textContent); // Outputs "Yagami Iori"

var styleEl = document.getElementById("fighter-style");
console.log(styleEl.textContent); // Outputs "Yagami-ryu Old Fighting Style"

// Pattern 2: Update text content
var ageEl = document.getElementById("fighter-age");
ageEl.textContent = "Age: 20";

// Pattern 3: Modify an attribute
var btn = document.getElementById("btn-update");
btn.setAttribute("disabled", "true");
btn.textContent = "Updated";

// Pattern 4: Check for null before operating
var el = document.getElementById("nonexistent");
if (el) {
	el.textContent = "Element found.";
} else {
	console.log("Element not found."); // Outputs when the element does not exist.
}

View sample page

Specifying an ID that does not exist returns null. Attempting to manipulate a null value will throw an error. Just like with document.querySelector(), a null check is required before operating on the result.

// Specifying an ID that does not exist.
var el = document.getElementById("nothing");
el.innerHTML = "<p>test</p>"; // TypeError: Cannot set properties of null

// Correct approach
var el = document.getElementById("title");
if (el) {
	el.innerHTML = "<p>New Title</p>";
}

Mistake 1: getElementById returns null when the ID does not exist

When the specified ID is not found, null is returned. Operating on null without a null check throws TypeError: Cannot set properties of null.

// NG: Operating on null without a null check throws an error
var el = document.getElementById("nonexistent");
el.textContent = "Found"; // TypeError: Cannot set properties of null

This produces the following output:

// OK: Always check for null before operating
var el = document.getElementById("nonexistent");
if (el) {
	el.textContent = "Found";
}

Mistake 2: Confusing getElementById with collection-returning methods

getElementById() selects a single element by its ID. Passing a class name returns null — for selecting multiple elements by class name, getElementsByClassName() or querySelectorAll() is the right choice.

// NG: getElementsByClassName returns an HTMLCollection, not a single element
var items = document.getElementsByClassName("fighter-item");
var first = document.getElementById("fighter-item"); // null (fighter-item is a class, not an ID)

This produces the following output:

// OK: Use getElementById when selecting by ID
var first = document.getElementById("fighter-name"); // returns h1#fighter-name

// Use querySelectorAll to select multiple elements by class
var items = document.querySelectorAll(".fighter-item");

document.getElementById() is the simplest method for retrieving an HTML element by its ID. Because an ID must be unique within a page, it always returns exactly one element.

You can also retrieve an element by ID using document.querySelector("#id"). Internally, document.getElementById() is faster, so it tends to be the preferred choice when selecting by ID.

Pass only the ID string as the argument. Unlike CSS selectors, you do not include the # prefix. Including # will cause the lookup to fail.

document.getElementById() is covered in more detail in the tutorial Targeting elements by ID and manipulating their attributes.