Attribute

Attribute wurden im Überblick über HTML kurz erläutert. Sehen wir uns jetzt genauer an.

Attribute machen HTML so leistungsstark. Attribute sind durch Leerzeichen getrennte Namen und Name/Wert-Paare, die im öffnenden Tag erscheinen und Informationen zum Element sowie dessen Funktionen bereitstellen.

Attribute definieren das Verhalten, die Verknüpfungen und die Funktionalität von Elementen. Einige Attribute sind global, d. h., sie können im öffnenden Tag eines beliebigen Elements enthalten sein. Andere Attribute gelten für mehrere Elemente, aber nicht für alle. Andere Attribute sind elementspezifisch und nur für ein einzelnes Element relevant. In HTML ist für alle Attribute außer booleschen und Aufzählungsattributen ein Wert erforderlich.

Wenn ein Attributwert Leerzeichen oder Sonderzeichen enthält, muss der Wert in Anführungszeichen gesetzt werden. Aus diesem Grund und zur besseren Lesbarkeit werden immer Zitationen empfohlen.

Bei HTML wird nicht zwischen Groß- und Kleinschreibung unterschieden, jedoch bei einigen Attributwerten. Bei Werten, die Teil der HTML-Spezifikation sind, wird die Groß-/Kleinschreibung nicht berücksichtigt. Bei definierten Stringwerten wie Klassen- und ID-Namen wird zwischen Groß- und Kleinschreibung unterschieden. Wenn bei einem Attributwert in HTML zwischen Groß- und Kleinschreibung unterschieden wird, muss er auch als Teil eines Attributselektors in CSS und JavaScript verwendet werden. Andernfalls ist dies nicht der Fall.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

Boolesche Attribute

Wenn ein boolesches Attribut vorhanden ist, ist es immer „true“. Boolesche Attribute sind autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, und selected. Wenn eines oder mehrere dieser Attribute vorhanden sind, ist das Element deaktiviert, erforderlich, schreibgeschützt usw. Ist es nicht vorhanden, ist es nicht vorhanden.

Boolesche Werte können entweder weggelassen, auf einen leeren String gesetzt oder der Name des Attributs sein. Der Wert muss aber nicht auf den String true festgelegt sein. Alle Werte, einschließlich true, false und 😀, werden in „true“ aufgelöst, wenn sie ungültig sind.

Diese drei Tags sind äquivalent:

<input required>
<input required="">
<input required="required">

Wenn der Attributwert „falsch“ ist, lassen Sie das Attribut weg. Wenn das Attribut „wahr“ ist, geben Sie das Attribut an, aber keinen Wert. Beispielsweise ist required="required" kein gültiger Wert in HTML. Da required jedoch ein boolescher Wert ist, werden ungültige Werte in „wahr“ aufgelöst. Da ungültige Enum-Attribute jedoch nicht unbedingt denselben Wert wie fehlende Werte ergeben, ist es einfacher, die Gewohnheit zum Auslassen von Werten zu entwickeln, als sich zu merken, welche Attribute boolesche oder Enum-Attribute sind und möglicherweise einen ungültigen Wert liefern.

Beim Wechseln zwischen wahr und falsch, fügen Sie das Attribut vollständig mit JavaScript hinzu und entfernen Sie es, anstatt den Wert umzuschalten.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

Beachten Sie, dass in XML-Sprachen wie SVG alle Attribute einen Wert enthalten müssen, einschließlich boolescher Attribute.

Aufgezählte Attribute

Enumerierte Attribute werden manchmal mit booleschen Attributen verwechselt. Es handelt sich um HTML-Attribute mit einer begrenzten Anzahl vordefinierter gültiger Werte. Wie boolesche Attribute haben auch sie einen Standardwert, wenn das Attribut vorhanden ist, aber der Wert fehlt. Wenn Sie beispielsweise <style contenteditable> angeben, wird standardmäßig <style contenteditable="true"> verwendet.

Im Gegensatz zu booleschen Attributen bedeutet das Auslassen des Attributs jedoch nicht, dass es falsch ist. Ein vorhandenes Attribut mit einem fehlenden Wert ist nicht unbedingt wahr. Der Standardwert für ungültige Werte ist nicht unbedingt mit einem Nullstring identisch. Wenn wir das Beispiel fortsetzen, wird contenteditable standardmäßig auf inherit gesetzt, wenn es fehlt oder ungültig ist. Es kann explizit auf false gesetzt werden.

Der Standardwert hängt vom Attribut ab. Im Gegensatz zu booleschen Werten sind Attribute nicht automatisch „wahr“, wenn sie vorhanden sind. Wenn Sie <style contenteditable="false"> angeben, kann das Element nicht bearbeitet werden. Ist der Wert ungültig, z. B. <style contenteditable="😀"> oder <style contenteditable="contenteditable">, ist er ungültig und wird standardmäßig auf inherit gesetzt.

Bei Aufzählungsattributen sind fehlende und ungültige Werte in den meisten Fällen identisch. Wenn beispielsweise das Attribut type für eine <input> fehlt, aber ohne Wert vorhanden ist oder einen ungültigen Wert hat, wird standardmäßig text verwendet. Dieses Verhalten ist zwar üblich, es ist jedoch keine Regel. Daher ist es wichtig zu wissen, welche Attribute boolesch und enumeriert sind. Lassen Sie Werte nach Möglichkeit weg, damit sie nicht falsch sind, und suchen Sie den Wert nach Bedarf.

Globale Attribute

Globale Attribute sind Attribute, die für jedes HTML-Element festgelegt werden können, einschließlich Elementen im <head>. Es gibt mehr als 30 globale Attribute. Obwohl diese alle theoretisch jedem HTML-Element hinzugefügt werden können, haben einige globale Attribute keine Auswirkungen, wenn sie auf einige Elemente festgelegt sind. So wird beispielsweise das Festlegen von hidden für ein <meta> als Metainhalt nicht angezeigt.

id

Das globale Attribut id wird verwendet, um eine eindeutige Kennung für ein Element zu definieren. Sie dient vielen Zwecken, unter anderem: – Ziel der Fragment-ID eines Links. - Ein Element für die Skripterstellung identifizieren. – Zuweisen eines Formularelements zu seinem Label – ein Label oder eine Beschreibung für Hilfstechnologien zur Verfügung stellen. – Designs mit hoher Spezifität oder Attributselektoren in CSS ausrichten.

Der Wert id ist ein String ohne Leerzeichen. Wenn es ein Leerzeichen enthält, funktioniert das Dokument nicht, aber du musst in HTML, CSS und JS Escapezeichen auf das id einfügen. Alle anderen Zeichen sind gültig. Ein id-Wert kann 😀 oder .class sein. Das ist aber keine gute Idee. Um das Programmieren für Ihr aktuelles und zukünftiges Selbst zu vereinfachen, legen Sie für das erste Zeichen von id einen Buchstaben fest und verwenden Sie nur ASCII-Buchstaben, Ziffern, _ und -. Es empfiehlt sich, eine id-Namenskonvention festzulegen und sich dann daran zu halten, da bei id-Werten zwischen Groß- und Kleinschreibung unterschieden wird.

Die id muss für das Dokument eindeutig sein. Das Layout deiner Seite wird wahrscheinlich nicht beschädigt, wenn ein id-Element mehr als einmal verwendet wird. Die Interaktionen mit JavaScript, Links und Elementen funktionieren jedoch möglicherweise nicht wie erwartet.

Linkfragment-ID

Die Navigationsleiste enthält vier Links. Das Link-Element wird später behandelt. Vorerst sollten Sie aber feststellen, dass Links nicht auf HTTP-basierte URLs beschränkt sind, sondern Fragmentkennungen für Abschnitte der Seite im aktuellen Dokument (oder in anderen Dokumenten) sein können.

Auf der Workshop-Website für maschinelles Lernen enthält die Navigationsleiste im Seitenheader vier Links:

Das href-Attribut enthält den Hyperlink, zu dem der Nutzer durch Aktivierung des Links weitergeleitet wird. Enthält eine URL ein Rautezeichen (#), gefolgt von einem String, ist dieser String eine Fragmentkennung. Wenn dieser String mit einem id eines Elements auf der Webseite übereinstimmt, ist das Fragment ein Anker oder Lesezeichen für dieses Element. Der Browser scrollt zu der Stelle, an der der Anker definiert wurde.

Diese vier Links verweisen auf vier Abschnitte unserer Seite, die durch ihr id-Attribut identifiziert werden. Wenn der Nutzer auf einen der vier Links in der Navigationsleiste klickt, wird zu dem Element gescrollt, das über die Fragment-ID verknüpft ist (das Element mit der entsprechenden ID ohne #).

Der <main>-Inhalt des Workshops zum maschinellen Lernen besteht aus vier Abschnitten mit IDs. Wenn der Websitebesucher auf einen der Links im <nav> klickt, wird der Abschnitt mit dieser Fragment-ID angezeigt. Das Markup sieht ungefähr so aus:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

Beim Vergleich der Fragmentbezeichner in den <nav>-Links stellen Sie fest, dass jede mit dem id einer <section> in <main> übereinstimmt. Der Browser stellt einen kostenlosen Top-of-Page-Link bereit. Wenn Sie href="#top" festlegen, die Groß-/Kleinschreibung nicht berücksichtigen oder nur href="#" festlegen, wird der Nutzer auf der Seite ganz nach oben gescrollt.

Das Hash-Zeichen-Trennzeichen in href ist nicht Teil der Fragment-ID. Die Fragment-ID ist immer der letzte Teil der URL und wird nicht an den Server gesendet.

CSS-Selektoren

In CSS können Sie ein Targeting auf jeden Bereich mithilfe eines ID-Selektors wie #feedback oder, um weniger Spezifität zu definieren, mithilfe eines Attributselektors, bei dem die Groß-/Kleinschreibung beachtet wird, [id="feedback"] vornehmen.

Skripting

Auf MLW.com gibt es ein Easter Egg nur für Mausnutzer. Durch Klicken auf den Lichtschalter wird die Seite ein- und ausgeschaltet.

Das Markup für das Bild des Lichtschalters ist: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> Das Attribut id kann als Parameter für die Methode getElementById() und mit dem Präfix # als Teil eines Parameters für die Methoden querySelector() und querySelectorAll() verwendet werden.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Unsere einzige JavaScript-Funktion nutzt diese Möglichkeit, um Elemente anhand ihres id-Attributs auszurichten:

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

Das HTML-<label>-Element hat ein for-Attribut, das als Wert das id des Formularsteuerelements annimmt, mit dem es verknüpft ist. Wenn Sie ein explizites Label erstellen, indem Sie ein id in jedes Formularsteuerelement einfügen und jedes Element mit dem Attribut for des Labels koppeln, wird jedem Formularsteuerelement ein Label zugeordnet.

Jedes Label kann genau einem Formularsteuerelement zugewiesen werden, ein Formularsteuerelement kann jedoch mehrere Labels haben.

Wenn die Formularsteuerung zwischen den öffnenden und schließenden <label>-Tags verschachtelt ist, sind die Attribute for und id nicht erforderlich. Dies wird als "implizites" Label bezeichnet. Durch Labels wissen alle Nutzer, wofür die einzelnen Formularsteuerelemente gedacht sind.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

Durch die Verknüpfung zwischen for und id werden die Informationen Nutzern von Hilfstechnologien zur Verfügung gestellt. Außerdem wird durch Klicken auf eine beliebige Stelle eines Labels das zugehörige Element hervorgehoben und der Klickbereich des Steuerelements erweitert. Dies ist nicht nur hilfreich für Menschen mit feinmotorischen Störungen, die die Maus weniger genau machen. Es hilft auch allen Nutzern von Mobilgeräten, die ihre Finger breiter als ein Optionsfeld haben.

In diesem Codebeispiel ist die fünfte Frage eines vorgetäuschten Quiz eine Multiple-Choice-Frage mit Einzelauswahl. Jedes Formularsteuerelement hat ein explizites Label mit einem eindeutigen id für jedes Steuerelement. Damit wir nicht versehentlich eine ID duplizieren, ist der ID-Wert eine Kombination aus Fragenummer und Wert.

Wenn Sie Optionsfelder einfügen, werden, da die Labels den Wert der Optionsfelder beschreiben, alle gleich benannten Schaltflächen in einem <fieldset>-Element eingeschlossen, wobei <legend> das Label oder die Frage für den gesamten Satz ist.

Andere Verwendungsmöglichkeiten für Bedienungshilfen

Die Verwendung von id für Barrierefreiheit und Nutzerfreundlichkeit ist nicht auf Labels beschränkt. In Einleitung zu Text wurde eine <section> in eine regionale Sehenswürdigkeit konvertiert, indem der id einer <h2> als Wert von aria-labelledby des <section> angegeben wurde, um den zugänglichen Namen bereitzustellen:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Es gibt über 50 aria-*-Status und -Eigenschaften, die für die Barrierefreiheit verwendet werden können. Für aria-labelledby, aria-describedby, aria-details und aria-owns wird eine durch Leerzeichen getrennte Referenzliste id als Wert verwendet. aria-activedescendant, das das derzeit fokussierte untergeordnete Element identifiziert, verwendet als Wert einen einzelnen id-Verweis: den des einzelnen Elements mit Fokus. Es kann jeweils nur ein Element fokussiert werden.

class

Das class-Attribut bietet eine zusätzliche Möglichkeit, Elemente mit CSS (und JavaScript) auszurichten. Im HTML-Code erfüllt es jedoch keinen anderen Zweck, obwohl sie möglicherweise von Frameworks und Komponentenbibliotheken verwendet werden. Das Attribut „class“ verwendet als Wert eine durch Leerzeichen getrennte Liste der Klassen für das Element, bei denen die Groß-/Kleinschreibung beachtet werden muss.

Der Aufbau einer soliden semantischen Struktur ermöglicht das Targeting von Elementen basierend auf ihrer Platzierung und Funktion. Die Tonstruktur ermöglicht die Verwendung von untergeordneten Element-Selektoren, relationalen Selektoren und Attributselektoren. In diesem Abschnitt lernen Sie die Attribute kennen. Überlegen Sie, wie Elemente mit denselben Attributen oder Attributwerten gestaltet werden können. Das Klassenattribut sollte nicht verwendet werden. Die meisten Entwickler wissen nur nicht, dass dies häufig nicht erforderlich ist.

Bislang hat MLW noch keine Klassen verwendet. Kann eine Website ohne einen einzigen Klassennamen gestartet werden? Wir werden sehen.

style

Das style-Attribut ermöglicht die Anwendung von Inline-Stilen. Das sind Stile, die auf das einzelne Element angewendet werden, auf das das Attribut festgelegt ist. Das style-Attribut nimmt CSS-Eigenschaftswertpaare als Wert an. Die Syntax des Werts entspricht dabei dem Inhalt eines CSS-Stilblocks: Die Attribute werden wie in CSS von einem Doppelpunkt gefolgt und jede Deklaration wird nach dem Wert durch Semikolons abgeschlossen.

Die Stile werden nur auf das Element angewendet, für das das Attribut festgelegt ist, wobei untergeordnete Elemente übernommene Eigenschaftswerte übernehmen, sofern sie nicht durch andere Stildeklarationen in verschachtelten Elementen oder in <style>-Blöcken oder Stylesheets überschrieben werden. Da der Wert das Äquivalent des Inhalts eines einzelnen Stilblocks darstellt, der nur auf dieses Element angewendet wird, kann er nicht für generierten Inhalt, zum Erstellen von Keyframe-Animationen oder zum Anwenden anderer At-Regeln verwendet werden.

style ist zwar ein globales Attribut, die Verwendung wird jedoch nicht empfohlen. Definieren Sie Stile stattdessen in einer oder mehreren separaten Dateien. Dennoch kann das Attribut style während der Entwicklung nützlich sein, um eine schnelle Gestaltung zu ermöglichen, z. B. zu Testzwecken. Fügen Sie dann den Stil "Lösung" in Ihre verknüpfte CSS-Datei ein.

tabindex

Das Attribut tabindex kann jedem Element hinzugefügt werden, damit es hervorgehoben wird. Mit dem Wert tabindex wird festgelegt, ob er der TAB-Reihenfolge hinzugefügt und optional in einer nicht standardmäßigen TAB-Reihenfolge angewendet wird.

Das Attribut tabindex verwendet als Wert eine Ganzzahl. Ein negativer Wert (üblicherweise -1) sorgt dafür, dass ein Element hervorgehoben werden kann, z. B. über JavaScript. Es wird jedoch nicht der Tabulatortaste hinzugefügt. Wenn für tabindex der Wert 0 festgelegt ist, ist das Element fokussierbar und über die Tabulatortaste erreichbar. Es wird der standardmäßigen TAB-Reihenfolge auf der Seite in der Reihenfolge des Quellcodes hinzugefügt. Ein Wert von 1 oder mehr versetzt das Element in eine priorisierte Fokussequenz und wird nicht empfohlen.

Auf dieser Seite gibt es eine Freigabefunktion, bei der ein benutzerdefiniertes <share-action>-Element als <button> verwendet wird. Die tabindex von null wird eingefügt, um das benutzerdefinierte Element in die standardmäßige TAB-Reihenfolge auf der Tastatur aufzunehmen:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Durch den role von button wird Nutzern von Screenreadern mitgeteilt, dass sich dieses Element wie eine Schaltfläche verhalten soll. JavaScript wird verwendet, um sicherzustellen, dass die Schaltflächenfunktion eingehalten wird. Dies umfasst die Verarbeitung von click- und keydown-Ereignissen sowie die Verarbeitung der Eingabetaste und der Leertaste.

Formularsteuerelemente, Links, Schaltflächen und Elemente vom Typ content editable (bearbeitbare Inhalte) können fokussiert werden. Wenn ein Tastaturnutzer auf die Tabulatortaste drückt, wird der Fokus zum nächsten fokussierbaren Element bewegt, als wäre tabindex="0" festgelegt. Andere Elemente sind standardmäßig nicht fokussierbar. Wenn Sie diesen Elementen das Attribut tabindex hinzufügen, können sie im Gegensatz zu anderen Elementen im Fokus bleiben.

Wenn ein Dokument Elemente mit einem tabindex von 1 oder mehr enthält, werden sie in einer separaten TAB-Reihenfolge eingefügt. Wie Sie im Codepen sehen, beginnt die Tabulatortaste in einer separaten Sequenz, vom niedrigsten zum höchsten Wert, und durchläuft die Tabs dann in der regulären Reihenfolge in der Quellreihenfolge.

Eine Änderung der TAB-Reihenfolge kann zu einer sehr schlechten User Experience führen. Es erschwert die Nutzung von Hilfstechnologien wie Tastaturen und Screenreadern, um sich in Ihren Inhalten zurechtzufinden. Für Entwickler ist es auch schwierig, diese zu verwalten und zu pflegen. Fokus ist wichtig. Es gibt ein ganzes Modul, das Fokus und Fokusreihenfolge behandelt.

role

Das Attribut role ist Teil der ARIA-Spezifikation und nicht Teil der whatWG HMTL-Spezifikation. Das Attribut role kann verwendet werden, um Inhalten eine semantische Bedeutung zu verleihen, sodass Screenreader Websitenutzer über die erwartete Nutzerinteraktion eines Objekts informieren können.

Es gibt einige gängige UI-Widgets wie Kombinationsfelder, Menüleisten, Tablisten und Treegrids, die kein natives HTML-Äquivalent haben. Beim Erstellen eines Designmusters mit Tabs können beispielsweise die Rollen tab, tablist und tabpanel verwendet werden. Eine Person, die die Benutzeroberfläche sehen kann, hat Erfahrung darin, im Widget zu navigieren und verschiedene Bereiche durch Klicken auf verknüpfte Tabs sichtbar zu machen. Wenn du die Rolle tab mit <button role="tab"> einschließt, wenn eine Gruppe von Schaltflächen verwendet wird, um verschiedene Bereiche anzuzeigen, weiß der Screenreader-Nutzer, dass mit der <button>, die derzeit im Fokus ist, ein zugehöriges Feld eingeblendet werden kann, anstatt eine typische schaltflächenähnliche Funktionalität zu implementieren.

Das Attribut role ändert nicht das Browserverhalten oder die Interaktionen der Tastatur oder Zeigergeräte. Wenn Sie role="button" zu einem <span> hinzufügen, wird es nicht in ein <button> umgewandelt. Aus diesem Grund wird empfohlen, semantische HTML-Elemente für den vorgesehenen Zweck zu verwenden. Wenn jedoch nicht das richtige Element verwendet werden kann, können Nutzer von Screenreadern mit dem Attribut role darüber informiert werden, wenn ein nicht semantisches Element in die Rolle eines semantischen Elements übernommen wurde.

contenteditable

Ein Element, bei dem das Attribut contenteditable auf true gesetzt ist, ist bearbeitbar, fokussierbar und wird der TAB-Reihenfolge hinzugefügt, als wäre tabindex="0" festgelegt. Contenteditable ist ein Enum-Attribut, das die Werte true und false unterstützt. Der Standardwert ist inherit, wenn das Attribut nicht vorhanden ist oder einen ungültigen Wert hat.

Diese drei öffnenden Tags sind äquivalent:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

Wenn Sie <style contenteditable="false"> angeben, kann das Element nicht bearbeitet werden, es sei denn, es kann standardmäßig bearbeitet werden, z. B. ein <textarea>. Wenn der Wert ungültig ist, z. B. <style contenteditable="😀"> oder <style contenteditable="contenteditable">, wird standardmäßig inherit verwendet.

Fragen Sie den Wert der schreibgeschützten Eigenschaft HTMLElement.isContentEditable ab, um zwischen den Status zu wechseln.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

Alternativ können Sie dieses Attribut angeben, indem Sie editor.contentEditable auf true, false oder inherit setzen.

Globale Attribute können auf alle Elemente angewendet werden, sogar auf <style>-Elemente. Sie können Attribute und etwas CSS verwenden, um einen Live-CSS-Editor zu erstellen.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

Versuchen Sie, color von style auf etwas anderes als inherit zu ändern. Versuchen Sie dann, style in einen p-Selektor zu ändern. Entfernen Sie die Eigenschaft display nicht, sonst verschwindet der Stilblock.

Benutzerdefinierte Attribute

Wir haben nur die Oberfläche der globalen HTML-Attribute angesprochen. Es gibt sogar noch mehr Attribute, die nur für ein oder eine begrenzte Gruppe von Elementen gelten. Selbst wenn Hunderte von Attributen definiert sind, kann es sein, dass Sie ein Attribut benötigen, das nicht in der Spezifikation enthalten ist. HTML hilft Ihnen dabei.

Sie können ein beliebiges benutzerdefiniertes Attribut erstellen, indem Sie das Präfix data- hinzufügen. Sie können Ihrem Attribut einen beliebigen Namen geben, der mit data- beginnt, gefolgt von einer Reihe von Zeichen in Kleinbuchstaben, die nicht mit xml beginnen und keinen Doppelpunkt (:) enthalten.

HTML ist zwar verzehrend und funktioniert auch dann, wenn Sie nicht unterstützte Attribute erstellen, die nicht mit data beginnen, oder selbst wenn Sie Ihr benutzerdefiniertes Attribut mit xml beginnen oder ein : einfügen. Es hat jedoch Vorteile, gültige benutzerdefinierte Attribute zu erstellen, die mit data- beginnen. Bei benutzerdefinierten Datenattributen wissen Sie, dass Sie nicht versehentlich einen vorhandenen Attributnamen verwenden. Benutzerdefinierte Datenattribute sind zukunftssicher.

Browser implementieren zwar kein Standardverhalten für bestimmte data--Attribute mit Präfix, aber es gibt eine integrierte Dataset-API, mit der Sie Ihre benutzerdefinierten Attribute durchlaufen können. Benutzerdefinierte Attribute sind eine hervorragende Möglichkeit, anwendungsspezifische Informationen über JavaScript zu kommunizieren. Fügen Sie Elementen benutzerdefinierte Attribute im Format data-name hinzu und greifen Sie auf diese über das DOM mit dataset[name] für das betreffende Element zu.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

Sie können getAttribute() mit dem vollständigen Attributnamen oder die einfachere dataset-Property verwenden.

el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop

Die Eigenschaft dataset gibt ein DOMStringMap-Objekt der data--Attribute jedes Elements zurück. In <blockquote> gibt es mehrere benutzerdefinierte Attribute. Das Dataset-Attribut bedeutet, dass Sie diese benutzerdefinierten Attribute nicht kennen müssen, um auf ihre Namen und Werte zuzugreifen:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Die Attribute in diesem Artikel sind global, d. h., sie können auf jedes HTML-Element angewendet werden, auch wenn nicht alle Auswirkungen auf diese Elemente haben. Als Nächstes sehen wir uns die beiden Attribute aus dem Einführungsbild, die wir nicht angesprochen haben, target und href, sowie einige weitere elementspezifische Attribute an, während wir uns die Links näher ansehen.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Attribute.