id

Der Zweck des ID-Attributs ist es, ein einzelnes Element beim Verlinken (mittels eines Fragment-Bezeichners), Scripting oder Styling (mit CSS) zu identifizieren.

Elemente mit ID-Attributen sind als globale Eigenschaften verfügbar. Der Eigenschaftsname ist das ID-Attribut, und der Eigenschaftswert ist das Element. Zum Beispiel, bei einem Markup wie:

<p id="preamble"></p>

könnten Sie auf das Absatz-Element in JavaScript mit einem Code wie diesem zugreifen:

const content = window.preamble.textContent;

Der Wert eines ID-Attributs darf keine ASCII-Leerraumzeichen enthalten. Browser behandeln nicht-konforme IDs, die Leerzeichen enthalten, als ob das Leerzeichen Teil der ID wäre. Im Gegensatz zum class-Attribut, welches durch Leerzeichen getrennte Werte zulässt, können Elemente nur einen einzelnen ID-Wert haben.

Technisch kann der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn der ID-Attributwert jedoch in CSS-Selektoren verwendet wird, entweder von JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, muss der ID-Attributwert ein gültiger CSS-Bezeichner sein. Das bedeutet, wenn ein ID-Attributwert kein gültiger CSS-Bezeichner ist (zum Beispiel my?id oder 1234), muss er, bevor er in einem Selektor verwendet wird, entweder mit der Methode CSS.escape() oder manuell geleitet werden.

Daher wird empfohlen, dass Entwickler Werte für ID-Attribute wählen, die gültige CSS-Bezeichner sind und kein Escaping erfordern.

Außerdem sind nicht alle gültigen ID-Attributwerte auch gültige JavaScript-Bezeichner. Zum Beispiel ist 1234 ein gültiger Attributwert aber kein gültiger JavaScript-Bezeichner. Dies bedeutet, dass der Wert kein gültiger Variablenname ist, sodass das Element nicht mit Code wie window.1234 zugänglich ist. Allerdings können Sie darauf zugreifen, indem Sie window["1234"] verwenden.

• Alle globalen Attribute.
• Element.id, das dieses Attribut widerspiegelt.
• Die Methode Document.getElementById.
• CSS ID-Selektoren.