Element.id gets and sets the element’s id content attribute as a string (MDN). Non-empty ids must be unique in the document.
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use el.id. Start with this line.
element.id / element.id = value| Call | What it does |
|---|---|
element.id / element.id = value | Primary signature. |
Built into the browser. Read or assign el.id — no import required.
element.id / element.id = value| Parameter | Description |
|---|---|
| getElementById | Optional. Lookup by that same string |
| Return Value | Description |
|---|---|
| * | The current value of el.id. |
idRead the identifier from an element that already has one.
const hero = document.getElementById("hero");
console.log(hero.id);
// "hero"
console.log(hero.getAttribute("id"));
// "hero" (same value via the attribute)getElementById("hero") returns the element..id. The property returns the string "hero".getAttribute("id") shows the same reflected value."", not null.idAssign a new identifier; the HTML attribute updates with it.
const box = document.querySelector("div");
box.id = "panel";
console.log(box.id); // "panel"
console.log(box.getAttribute("id")); // "panel"box.id = "panel" writes the identifier.id attribute on the element updates too."panel" on another node in the same document.getElementById + CaseLookup uses the exact string — case must match.
const el = document.createElement("div");
el.id = "Hero";
document.body.appendChild(el);
console.log(document.getElementById("Hero") === el); // true
console.log(document.getElementById("hero")); // null"Hero" is stored exactly as written.getElementById("Hero") returns the node."hero" is a different string → null.Element.id is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.
Get and set the element's id attribute string — unique when non-empty.
Bottom line: Safe for production. Prefer unique, case-consistent ids and look them up with getElementById.
Learn how to get and set an element’s HTML content as a string.
14 people found this page helpful