JavaScript Element id Property

What You’ll Learn

Element.id is a read/write instance property that reflects the element’s id attribute. Learn how to read and set it, keep IDs unique, use them with getElementById and CSS—with five examples and try-it labs.

Introduction

Almost every beginner tutorial starts with id="something" in HTML. In JavaScript, that same value is available as element.id—a simple string you can read or change.

IDs are the fastest way to find one element with document.getElementById(), and they power CSS selectors like #hero. If the value is not empty, it must be unique in the document.

const hero = document.getElementById("hero");
console.log(hero.id); // "hero"
hero.id = "banner";

Understanding the Property

MDN: the id property of the Element interface represents the element’s identifier, reflecting the id global attribute.

• Get / set — readable and writable string.
• Reflects id — stays in sync with the HTML attribute.
• Unique when non-empty — required for reliable lookups and CSS.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

id

Value

A string. Empty string means no identifier. Non-empty values should be unique in the document. IDs are case-sensitive—avoid pairs that differ only by capitalization.

📋 MDN Identifier Shape

MDN highlights that id reflects the global attribute and is often used with getElementById and CSS selectors:

<section id="hero">Welcome</section>

const hero = document.getElementById("hero");
console.log(hero.id); // "hero"
hero.id = "banner";
console.log(document.getElementById("banner") === hero); // true

Related learning: className, getAttribute("id"), and setAttribute("id", ...).

Examples Gallery

Examples follow MDN Element: id. Labs use simple elements so you can read, set, and look up identifiers safely.

const hero = document.getElementById("hero");
console.log(hero.id);
console.log(hero.getAttribute("id"));

hero
hero

const box = document.querySelector("div");
box.id = "panel";
console.log(box.id);
console.log(box.outerHTML.includes('id="panel"'));

panel
true

const el = document.getElementById("hero");
el.id = "banner";
console.log(document.getElementById("hero")); // null
console.log(document.getElementById("banner") === el); // true

null
true

const plain = document.querySelector("p");
console.log(plain.id); // ""
plain.id = "Note";
console.log(document.getElementById("note")); // null (different case)
console.log(document.getElementById("Note") === plain); // true

null
true

console.log({
  supported: "id" in Element.prototype,
  returns: "string",
  tip: "Keep non-empty ids unique; they are case-sensitive",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string",
  "tip": "Keep non-empty ids unique; they are case-sensitive",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Finding one element quickly with document.getElementById().
• Hooking CSS rules with #id selectors.
• Linking labels and controls (<label for="email">).
• Assigning a temporary id in JS for a script that expects one.
• Clearing an id (el.id = "") when uniqueness must move elsewhere.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Non-empty ids must be unique in the document.
• Identifiers are case-sensitive; avoid near-duplicates that differ only by case.
• Related: firstElementChild, className, innerHTML, JavaScript hub.

💡 Best Practices