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.

sample_getElementById.html

<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>

sample_getElementById.js

// 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(), always perform a null check 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>";
}

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.getElementById("id"), but document.getElementById() is faster internally, so it is recommended 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.