document.getElementById() Since: DOM Level 1（1998）

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="title">Main Title</h1>
<p id="description">This is a description.</p>

var title = document.getElementById("title");
console.log(title.textContent); // Outputs "Main Title"

var desc = document.getElementById("description");
desc.textContent = "The description has been updated.";

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.querySelector("#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.