getElementById

Learn to select an element by id and write safely against a null return.

Selecting an element with getElementById

In HTML we give an element an id attribute; this value is unique on the page. In JavaScript we select that element with document.getElementById(id).

Example: to select <button id="save">Save</button> we write const saveBtn = document.getElementById("save");.

The argument is a plain string; the # sign is NOT used. This method returns a single element; if it cannot find it, it returns null.

When the element is not found: null

If getElementById cannot find an element with the given id, it returns null. This happens when the page has not loaded yet or the id is misspelled.

Accessing properties on a null value throws a TypeError. So it is safer to check the element first:

const btn = document.getElementById("save"); if (btn) { btn.textContent = "Save"; }

Exercise Select the element and update it safely

Select the element with id "message" using getElementById and assign it to msg. Then check with if (msg); inside it, set msg.textContent to "Hello".

Show example solution

First select with getElementById, then check with if (msg), inside set textContent.
Example solution:
const msg = document.getElementById("message");
if (msg) {
  msg.textContent = "Hello";
}

Test yourself

Select the element with id "page-header"
```
const header = document.____("page-header");
```
- querySelectorById
- getElementById
- findById
- getId
Show answer

getElementById — Correct! getElementById selects a single element by id.

Select an element by id

// Select the button with id "save"
const saveBtn = document.____);

Show answer

// Select the button with id "save"
const saveBtn = document.getElementById('save'));

Why use an if (btn) check?
- Without if the code does not compile
- if finds the element automatically
- Accessing a property on null throws a TypeError
- if runs faster
Show answer

Accessing a property on null throws a TypeError — Correct! Accessing a property on a null value throws a TypeError.

Next lesson: querySelector

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies