HTML id-Globalattribut

Das id Globalattribut definiert einen Bezeichner (ID), der im gesamten Dokument einzigartig 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, als ob das Leerzeichen Teil der ID wäre. Im Gegensatz zum class-Attribut, das durch Leerzeichen getrennte Werte zulässt, können Elemente nur einen einzigen ID-Wert haben.

Technisch gesehen kann der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn jedoch in CSS-Selektoren, entweder von JavaScript aus mittels APIs wie Document.querySelector() oder in CSS-Stylesheets, ID-Attributwerte verwendet werden, müssen diese 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 Methode CSS.escape() oder manuell escaped werden muss.

Aus diesem Grund wird empfohlen, dass Entwickler Werte für ID-Attribute wählen, die gültige CSS-Bezeichner sind, die 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. Das bedeutet, dass der Wert kein gültiger Variablenname ist, sodass Sie nicht mit Code wie window.1234 auf das Element zugreifen können. Sie können jedoch mit window["1234"] darauf zugreifen.

Beschreibung

Das Ziel des ID-Attributs ist es, ein einzelnes Element beim Verlinken (unter Verwendung eines Fragment-Bezeichners), Scripting oder Stylen (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 folgendem Markup:

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

Könnten Sie auf das Paragraph-Element in JavaScript so zugreifen:

js
const content = window.preamble.textContent;

Warnung: Auf dieses Verhalten zu vertrauen, ist riskant und wird nicht empfohlen. Es kann zu unerwarteten Konflikten mit einigen vorhandenen oder zukünftigen APIs im Browser führen. Wenn Browser zum Beispiel eine neue globale Eigenschaft namens preamble einführen, dann wird derselbe Code nicht mehr auf das HTML-Element zugreifen können. Verwenden Sie document.getElementById() oder document.querySelector() stattdessen.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch