Element.id — Eigenschaft · JavaScript-Referenz

Signatur

Element.id

Beschreibung

Die Eigenschaft id des Element-Interfaces spiegelt das Inhaltsattribut id wider. Liest man sie, erhält man den aktuellen Wert des Attributs. Weist man ihr einen Wert zu, wird das Attribut im DOM sofort angepasst. element.id = "x" bewirkt also dasselbe wie element.setAttribute("id", "x").

Ist der Wert keine leere Zeichenkette, muss er im gesamten Dokument (bzw. innerhalb einer Shadow-Root) eindeutig sein. Typische Einsatzzwecke sind:

ein Element gezielt mit document.getElementById() abrufen,
als CSS-Selektor (#name) für Gestaltung oder querySelector(),
als Sprungziel für Fragment-Links (href="#abschnitt"),
zur Verknüpfung von Elementen, z. B. <label for>, aria-labelledby, aria-describedby oder form-Attribute.

Hat das Element kein id-Attribut, liefert die Eigenschaft eine leere Zeichenkette "" und nicht null. Groß- und Kleinschreibung werden unterschieden: "Kopf" und "kopf" sind zwei verschiedene IDs.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des id-Attributs. Fehlt das Attribut, ist es eine leere Zeichenkette "". Beim Setzen wird jeder Wert in eine Zeichenkette umgewandelt.

Beispiele

ID lesen und setzen

// HTML: <section id="einleitung"></section>
const section = document.querySelector('section');
console.log(section.id);

section.id = 'intro';
console.log(section.getAttribute('id'));

// Element ohne ID
const div = document.createElement('div');
console.log(JSON.stringify(div.id));

einleitung intro ""

Label und Eingabefeld dynamisch verknüpfen

let zaehler = 0;
const eindeutigeId = (praefix) => `${praefix}-${++zaehler}`;

const erzeugeFeld = (beschriftung) => {
  const id = eindeutigeId('feld');
  const label = document.createElement('label');
  label.htmlFor = id;
  label.textContent = beschriftung;

  const input = document.createElement('input');
  input.id = id;

  document.body.append(label, input);
  return input;
};

const email = erzeugeFeld('E-Mail');
console.log(email.id, document.getElementById(email.id) === email);

feld-1 true

Doppelte IDs im Dokument aufspüren

const findeDoppelteIds = () => {
  const gezaehlt = new Map();
  for (const el of document.querySelectorAll('[id]')) {
    gezaehlt.set(el.id, (gezaehlt.get(el.id) ?? 0) + 1);
  }
  return [...gezaehlt].filter(([, n]) => n > 1).map(([id]) => id);
};

console.log(findeDoppelteIds());

[] (bzw. z. B. ["header"], wenn IDs doppelt vorkommen)

Sonderzeichen-IDs sicher in Selektoren verwenden

const el = document.createElement('div');
el.id = '1:abschnitt';
document.body.append(el);

// document.querySelector('#1:abschnitt') würde einen SyntaxError werfen
const treffer = document.querySelector(`#${CSS.escape(el.id)}`);
console.log(treffer === el);

true

// Wichtig · Fallstricke

Eindeutigkeit: Der Browser verhindert doppelte IDs nicht. Kommt eine ID mehrfach vor, gibt getElementById() nur das erste Element zurück. Außerdem gehen Barrierefreiheits-Verknüpfungen wie aria-labelledby oder label for kaputt.
Keine Leerzeichen: Laut HTML-Standard darf eine ID nicht leer sein und keine Leerraumzeichen enthalten. IDs, die mit einer Ziffer beginnen oder Sonderzeichen wie : oder . enthalten, sind in HTML erlaubt. In CSS-Selektoren müssen sie aber mit CSS.escape() maskiert werden.
Globale Variablen: Browser legen Elemente mit ID zusätzlich als Eigenschaft von window ab (named access). Darauf sollte man sich nicht verlassen, weil es zu Namenskonflikten mit echten Variablen kommen kann.
Sicherheit (DOM Clobbering): Wenn Nutzer eigenes HTML mit IDs einschleusen können, lassen sich globale Namen oder Formular-Eigenschaften überschreiben. Deshalb Nutzer-HTML bereinigen (z. B. mit DOMPurify) und keine sicherheitsrelevanten Entscheidungen von globalen Namen abhängig machen.
Shadow DOM: IDs gelten nur innerhalb ihres eigenen Baums. document.getElementById() findet keine Elemente in einer Shadow-Root. Dafür shadowRoot.getElementById() verwenden.
Ist das Attribut nicht vorhanden, wird "" zurückgegeben, nicht null. Ob ein Element wirklich eine ID hat, prüft man mit el.hasAttribute('id').
Die Eigenschaft wird von allen Browsern unterstützt.

Siehe auch

Document.getElementById() Element.querySelector() Element.className Element.setAttribute() Element.getAttribute() CSS.escape() CSSSkew.ay