HTML id globales Attribut

Das id globale Attribut definiert eine Kennung (ID), die innerhalb des gesamten Dokuments eindeutig sein muss.

Probieren Sie es aus

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid #696969;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting::before {
  content: "ℹ️";
  margin-right: 5px;
}

Syntax

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

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

Aus diesem Grund wird Entwicklern empfohlen, für ID-Attribute Werte zu wählen, die gültige CSS-Bezeichner sind und kein Maskieren erfordern.

Auch sind nicht alle gültigen ID-Attributwerte gültige JavaScript-Bezeichner. Zum Beispiel ist 1234 ein gültiger Attributwert, aber kein gültiger JavaScript-Bezeichner. Das bedeutet, dass der Wert kein gültiger Variablenname ist, sodass Sie nicht auf das Element mit Code wie window.1234 zugreifen können. Allerdings können Sie darauf mit window["1234"] zugreifen.

Beschreibung

Der Zweck des ID-Attributs besteht darin, ein einzelnes Element beim Verlinken (mithilfe eines Fragmentidentifikators), beim Skripten oder beim Styling (mit CSS) zu identifizieren.

Sie können auf Elemente mit ID-Attributen als globale Eigenschaften des window-Objekts zugreifen, wobei der Eigenschaftsname der ID-Wert und der Eigenschaftswert das entsprechende Element ist. Zum Beispiel, gegeben diesem Markup:

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

Können Sie auf dieses Absatz-Element in JavaScript mit folgendem Code zugreifen:

js
const content = window.preamble.textContent;

Warnung: Es ist gefährlich und wird nicht empfohlen, sich auf das Muster window["id-value"] oder window.idValue zu verlassen, da es zu unerwarteten Konflikten mit bestehenden oder zukünftigen APIs im Browser führen kann. Zum Beispiel, wenn ein Browser in Zukunft eine eingebaute globale Eigenschaft namens preamble einführt, könnte Ihr Code möglicherweise nicht mehr auf das HTML-Element zugreifen. Um solche Konflikte zu vermeiden, verwenden Sie immer die Methoden Document.getElementById() oder Document.querySelector(), um auf Elemente über die ID zuzugreifen.

Spezifikationen

Specification
HTML
# global-attributes:the-id-attribute-2

Browser-Kompatibilität

Siehe auch