HTML-Attribut-Referenz

In HTML haben die meisten Attribute zwei Gesichter: das Inhaltsattribut und das IDL-Attribut (Interface Definition Language).

Das Inhaltsattribut ist das Attribut, das Sie im Inhalt festlegen (der HTML-Code) und Sie können es mit element.setAttribute() oder element.getAttribute() setzen oder abrufen. Das Inhaltsattribut ist immer eine Zeichenkette, auch wenn der erwartete Wert eine Ganzzahl sein sollte. Um zum Beispiel das maxlength eines <input>-Elements mit dem Inhaltsattribut auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element aufrufen.

Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut wird immer (kann jedoch umwandeln) das zugrunde liegende Inhaltsattribut verwenden, um einen Wert anzugeben, wenn Sie es abrufen, und speichert etwas im Inhaltsattribut, wenn Sie es setzen. Mit anderen Worten, die IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.

Meistens geben IDL-Attribute ihre Werte so zurück, wie sie wirklich verwendet werden. Beispielsweise ist der Standard type für <input>-Elemente "text", daher wird das <input>-Element, wenn Sie input.type="foobar" setzen, vom Typ text sein (in der Erscheinung und im Verhalten), aber der Wert des "type"-Inhaltsattributs wird "foobar" sein. Das type IDL-Attribut gibt jedoch die Zeichenkette "text" zurück.

IDL-Attribute sind nicht immer Zeichenketten; zum Beispiel ist input.maxlength eine Zahl (ein vorzeichenbehaftetes Langformat). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, daher gibt input.maxlength immer eine Zahl zurück und wenn Sie input.maxlength setzen, will es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird er gemäß den standardmäßigen JavaScript-Regeln zur Typumwandlung automatisch in eine Zahl umgewandelt.

IDL-Attribute können andere Typen widerspiegeln wie vorzeichenlose längere Zahlen, URLs, Booleans usw. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen sich verhalten, hängt vom Attribut ab. Meistens wird es den im Standard festgelegten Regeln folgen, aber manchmal tut es das nicht. Die HTML-Spezifikationen versuchen, dies so benutzerfreundlich wie möglich zu machen, aber aus verschiedenen Gründen (meist historische) verhalten sich einige Attribute merkwürdig (select.size, zum Beispiel) und Sie sollten die Spezifikationen lesen, um zu verstehen, wie sie sich genau verhalten.

Einige Inhaltsattribute (z.B. required, readonly, disabled) werden boolesche Attribute genannt. Wenn ein boolesches Attribut vorhanden ist, ist sein Wert true, und wenn es fehlt, ist sein Wert false.

HTML definiert Einschränkungen für die erlaubten Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (äquivalent kann das Attribut einen nicht zugewiesenen Wert haben) oder ein Wert, der in einer ASCII-Groß-/Kleinschreibung auf den kanonischen Namen des Attributs passt, ohne führende oder nachfolgende Leerzeichen. Die folgenden Beispiele sind gültige Arten, ein boolesches Attribut zu markieren:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Um es klarzustellen, die Werte "true" und "false" sind bei booleschen Attributen nicht erlaubt. Um einen false-Wert darzustellen, muss das Attribut ganz weggelassen werden. Diese Einschränkung beseitigt einige häufige Missverständnisse: Mit checked="false" beispielsweise würde das checked-Attribut des Elements als true interpretiert, weil das Attribut vorhanden ist.

Zusätzlich zu den oben aufgeführten Attributen können globale Ereignis-Handler — wie onclick — auch als Inhaltsattribute auf allen Elementen spezifiziert werden.

Alle Ereignis-Handler-Attribute akzeptieren einen String. Der String wird zur Synthese einer JavaScript-Funktion wie function name(/*args*/) {body} verwendet, wobei name der Name des Attributs und body der Wert des Attributs ist. Der Handler erhält die gleichen Parameter wie sein JavaScript-Ereignis-Handler-Gegenstück — die meisten Handler erhalten nur einen event-Parameter, während onerror fünf erhält: event, source, lineno, colno, error. Das bedeutet, dass Sie im Allgemeinen die event-Variable innerhalb des Attributs verwenden können.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

• HTML-Elemente