document.getElementById()
| Since: | DOM Level 1(1998) |
|---|
Retrieves the HTML element with the specified ID from the document. Because IDs must be unique within a page, this method always returns exactly one element.
Syntax
var element = document.getElementById("id");
Arguments
| Argument | Description |
|---|---|
| id | The ID of the HTML element you want to retrieve, specified as a string. The # prefix is not needed. |
Return Value
Returns the HTML element (an Element object) with the specified ID. If no matching element is found, returns null.
Sample Code
<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.
}
When an Element Is Not Found
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>";
}
Common Mistakes
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");
Overview
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.
Browser Compatibility
4.5 or earlier ×
6 or earlier ×
Android Browser
37+ ○
4 or earlier ×
Chrome Android
36+ ○
17 or earlier ×
Firefox Android
79+ ○
3 or earlier ×If you find any errors or copyright issues, please contact us.