Attribute

Die Attribute wurden in der Übersicht über HTML kurz erläutert. wird es Zeit für einen tieferen Einblick.

Attribute machen HTML so leistungsstark. Attribute sind durch Leerzeichen getrennte Namen und Name/Wert-Paare, die im öffnenden Tag angezeigt werden. mit Informationen über das Element und seine Funktionalität.

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 Elements platziert werden. Andere Attribute gelten für mehrere Elemente, aber nicht für alle, während andere Attribute elementspezifisch sind. die nur für ein einzelnes Element relevant sind. In HTML ist für alle Attribute außer booleschen und zum Teil auch Aufzählungsattributen ein Wert erforderlich.

Wenn ein Attributwert ein Leerzeichen oder Sonderzeichen enthält, muss der Wert in Anführungszeichen gesetzt werden. Aus diesem Grund Und für eine bessere Lesbarkeit Zitate werden immer empfohlen.

Bei HTML wird zwar nicht zwischen Groß- und Kleinschreibung unterschieden, einige Attributwerte jedoch schon. 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, Bei Verwendung als Teil eines Attributselektors in CSS und in JavaScript wird zwischen Groß- und Kleinschreibung unterschieden. sonst nicht.

<!-- 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". Zu den booleschen Attributen gehören 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 z. B. deaktiviert, erforderlich oder schreibgeschützt. Wenn es nicht vorhanden ist, ist es nicht vorhanden.

Boolesche Werte können entweder weggelassen werden, auf eine leere Zeichenfolge festgelegt oder der Name des Attributs sein. aber der Wert muss nicht unbedingt auf den String true festgelegt werden. Alle Werte, einschließlich true, false und 😀, werden als „wahr“ aufgelöst, wenn sie ungültig sind.

Diese drei Tags sind äquivalent:

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

Wenn der Attributwert „false“ ist, lassen Sie das Attribut weg. Wenn das Attribut auf „true“ gesetzt ist, geben Sie das Attribut an, aber keinen Wert. Zum Beispiel ist required="required" kein gültiger Wert in HTML. Da required jedoch boolesch ist, werden ungültige Werte als wahr aufgelöst. Da ungültige Aufzählungsattribute jedoch nicht unbedingt zu demselben Wert aufgelöst werden wie fehlende Werte, ist es einfacher, in die Gewohnheit, Werte auszulassen, als sich zu merken, welche Attribute boolesche oder Aufzählungszeichen sind und möglicherweise einen ungültigen Wert liefern.

Wenn Sie zwischen „true“ und „false“ wechseln, fügen Sie das Attribut mit JavaScript vollständig hinzu oder entfernen Sie es, anstatt den Wert zu wechseln.

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

Beachten Sie, dass bei XML-Sprachen wie SVG alle Attribute einen Wert enthalten müssen. Dies gilt auch für boolesche Attribute.

Aufgezählte Attribute

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

Anders als bei booleschen Attributen bedeutet das Weglassen des Attributs jedoch nicht, dass es falsch ist. ein vorhandenes Attribut mit einem fehlenden Wert nicht unbedingt wahr ist; und der Standardwert für ungültige Werte ist nicht unbedingt mit einem Null-String identisch. In Fortsetzung des Beispiels Wenn contenteditable fehlt oder ungültig ist, wird standardmäßig inherit verwendet und kann explizit auf false festgelegt werden.

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

In den meisten Fällen sind fehlende und ungültige Werte bei Aufzählungsattributen identisch. Wenn beispielsweise das Attribut type auf einer <input> fehlt, jedoch ohne Wert vorhanden ist oder einen ungültigen Wert hat, wird standardmäßig text verwendet. Dies ist zwar üblich, aber keine Regel. Aus diesem Grund ist es wichtig zu wissen, welche Attribute boolesch oder enumeriert sind. lassen Sie Werte weg, damit Sie sie nicht falsch machen, und suchen Sie den Wert nach Bedarf.

Globale Attribute

Globale Attribute sind Attribute, die für jedes HTML-Element festgelegt werden können, auch für Elemente im <head>. Es gibt mehr als 30 globale Attribute. Obwohl all diese Attribute theoretisch jedem HTML-Element hinzugefügt werden können, haben einige globale Attribute keine Auswirkungen. wenn sie für einige Elemente festgelegt ist; Beispielsweise wird die Einstellung von hidden für <meta> als Meta-Inhalt nicht angezeigt.

id

Das globale Attribut id wird verwendet, um eine eindeutige Kennung für ein Element zu definieren. Sie dient vielen Zwecken, darunter: – Ziel des Fragmentbezeichners eines Links – Ein Element für die Skripterstellung identifizieren. – Formularelement mit seinem Label verknüpfen - Bereitstellung eines Labels oder einer Beschreibung für Hilfstechnologien - Ausrichtung auf Designs mit (hoher Spezifität oder als Attributselektoren) im CSS

Der Wert id ist ein String ohne Leerzeichen. Wenn es ein Leerzeichen enthält, wird das Dokument nicht beschädigt, Sie müssen es jedoch auf das id durch Escape-Zeichen im HTML-, CSS- und JS-Code. Alle anderen Zeichen sind gültig. Ein id-Wert kann 😀 oder .class sein. ist aber keine gute Idee. Um das Programmieren für Ihr aktuelles und zukünftiges Ich zu vereinfachen, wandeln Sie das erste Zeichen des id in einen Buchstaben um, Verwenden Sie nur ASCII-Buchstaben und Ziffern sowie _ und -. Es empfiehlt sich, eine Namenskonvention für id zu erstellen und diese dann beizubehalten. da bei id-Werten zwischen Groß- und Kleinschreibung unterschieden wird.

Die id muss für das Dokument eindeutig sein. Das Layout deiner Seite funktioniert wahrscheinlich auch genauso, wenn id mehrmals verwendet wird. Ihre Interaktionen mit JavaScript, Links und Elementen funktionieren jedoch möglicherweise nicht wie erwartet.

ID des Linkfragments

Die Navigationsleiste enthält vier Links. Auf das Link-Element kommen wir später noch näher, aber für den Moment sind Links nicht eingeschränkt. auf HTTP-basierte URLs. Sie können Fragmentbezeichner für Abschnitte der Seite im aktuellen Dokument (oder in anderen Dokumenten) sein.

Auf der Website des Workshops zum maschinellen Lernen enthält die Navigationsleiste in der Kopfzeile der Seite vier Links:

Das href-Attribut enthält den Hyperlink, zu dem der Nutzer beim Aktivieren des Links weitergeleitet wird. Wenn eine URL ein Rautezeichen (#) enthält gefolgt von einer Zeichenfolge, ist diese Zeichenfolge eine Fragmentkennung. Wenn dieser String mit einem id eines Elements in der Webseite, ist das Fragment ein Anker oder ein Lesezeichen für dieses Element. Der Browser scrollt zu dem Punkt, an dem der Anker definiert ist.

Diese vier Links verweisen auf vier Bereiche unserer Seite, die durch ihr id-Attribut gekennzeichnet sind. Wenn der Nutzer auf eine der vier Links in der Navigationsleiste, das über die Fragment-ID verlinkte Element, das Element mit der übereinstimmenden ID Scrollt in die Ansicht mit Minus #.

Der Inhalt des <main>-Workshops zum maschinellen Lernen ist in vier Abschnitte mit IDs unterteilt. Wenn der Websitebesucher auf eine der Links im <nav> enthält, wird der Abschnitt mit dieser Fragment-ID sichtbar. Das Markup sieht in etwa 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 Fragmentkennungen in den <nav>-Links stellen Sie fest, dass jeder mit dem id eines <section> in <main> übereinstimmt. Der Browser gibt uns einen kostenlosen Top-of-Page- . Wenn du href="#top" (Groß-/Kleinschreibung nicht berücksichtigend oder einfach href="#") festlegst, scrollt die Nutzenden ganz oben auf der Seite.

Das Rautezeichen in href ist nicht Teil der Fragment-ID. Die Fragmentkennung ist immer die letzte Teil der URL und wird nicht an den Server gesendet.

CSS-Selektoren

In CSS können Sie ein Targeting auf jeden Bereich mit einem ID-Selektor wie #feedback vornehmen. Wenn die Spezifität geringer ist, können Sie die Groß- und Kleinschreibung berücksichtigen. Attributselektor [id="feedback"].

Skripting

Auf MLW.com gibt es nur ein Easter Egg für Mausnutzer. Mit einem Klick auf den Lichtschalter können Sie die Seite ein- und ausschalten.

Das Markup für das Bild des Lichtschalters lautet: 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 -Parameter für die Methoden querySelector() und querySelectorAll().

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

Unsere einzige JavaScript-Funktion nutzt diese Fähigkeit, um Elemente nach ihrem id-Attribut 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 den 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 mit dem for-Attribut des Labels verknüpfen, dass jedes Formularsteuerelement ein Label hat.

Jedes Label kann genau einem Formularsteuerelement zugeordnet werden, einem Formularsteuerelement kann jedoch mehr als ein Label zugeordnet sein.

Wenn das Formularsteuerelement zwischen dem öffnenden und dem schließenden <label>-Tag verschachtelt ist, werden die Attribute for und id sind nicht erforderlich: Dies wird als „implizit“ bezeichnet. . Labels informieren alle Nutzer darüber, 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 von for und id werden die Informationen für Nutzer von Hilfstechnologien verfügbar gemacht. Außerdem Wenn Sie auf eine beliebige Stelle auf einem Label klicken, wird das zugehörige Element hervorgehoben und der Klickbereich des Steuerelements vergrößert. Das ist nicht nur hilfreich, für Menschen mit Feinmotorik, sodass die Maus weniger genau ist; Außerdem können Nutzende von Mobilgeräten ihre Finger breiter bedienen als die Funkschnittstelle. Schaltfläche.

In diesem Codebeispiel ist die gefälschte fünfte Frage eines gefälschten Quiz eine Multiple-Choice-Frage mit Einzelauswahl. Jedes Formularsteuerelement hat eine explizite Label mit einer eindeutigen id für jedes Label. Um sicherzustellen, dass wir nicht versehentlich eine ID duplizieren, ist der ID-Wert eine Kombination aus Fragenummer und -wert.

Beim Einbinden von Optionsfeldern sind alle gleichnamigen Schaltflächen in einem <fieldset> eingeschlossen, da die Labels den Wert der Optionsfelder beschreiben. Dabei ist <legend> das Label bzw. die Frage für den gesamten Satz.

Andere Verwendungsmöglichkeiten der Bedienungshilfen

Die Verwendung von id im Hinblick auf Barrierefreiheit und Nutzerfreundlichkeit ist nicht auf Labels beschränkt. In der Einführung in den Text wird <section> wurde in eine regionale Sehenswürdigkeit umgewandelt, indem der id eines <h2> als Wert des aria-labelledby der <section> angegeben wurde, der bereitgestellt werden soll. den barrierefreien Namen:

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

Es gibt über 50 aria-*-Zustände und -Eigenschaften, die zur Gewährleistung der Barrierefreiheit verwendet werden können. aria-labelledby, aria-describedby aria-details und aria-owns verwenden als Wert eine durch Leerzeichen getrennte id-Referenzliste. aria-activedescendant, die bezeichnet das aktuell fokussierte untergeordnete Element und verwendet als Wert einen einzelnen id-Verweis: den Wert des einzelnen Elements mit Fokus (es kann jeweils nur ein Element fokussiert werden).

class

Das Attribut class bietet eine zusätzliche Möglichkeit, Elemente mit CSS (und JavaScript) auszurichten, dient aber keinem anderen Zweck in HTML, wobei diese auch von Frameworks und Komponentenbibliotheken verwendet werden können. Das Klassenattribut verwendet als Wert eine durch Leerzeichen getrennte Liste der Klassen für das Element, bei der die Groß- und Kleinschreibung berücksichtigt wird.

Wenn Sie eine Soundsemantik erstellen, können Elemente auf der Grundlage ihrer Position und Funktion für das Targeting ausgewählt werden. Klangstruktur ermöglicht die Verwendung von untergeordneten Elementenselektoren, relationalen Selektoren und Attributselektoren. Wenn Sie mehr über Attribute erfahren, in diesem Abschnitt überlegen, wie Elemente mit denselben Attributen oder Attributwerten formatiert werden können. Nicht, dass Sie das Attribut class nicht verwenden, ist es nur so, dass den meisten Entwicklern nicht bewusst ist, dass dies häufig nicht erforderlich ist.

Bisher hat MLW noch keine Klassen verwendet. Kann eine Website ohne einen einzelnen Klassennamen gestartet werden? Mal sehen.

style

Das Attribut style ermöglicht die Anwendung von Inline-Stilen. Das sind Stile, die auf das einzelne Element angewendet werden, für das das Attribut festgelegt ist. Das Attribut style verwendet als Wert CSS-Eigenschaftswertpaare, wobei die Syntax des Werts der des Inhalts eines CSS-Stilblock: Auf Eigenschaften folgt wie in CSS ein Doppelpunkt. Semikolons schließen jede Deklaration nach dem Wert ab.

Die Stile werden nur auf das Element angewendet, für das das Attribut festgelegt ist, wobei untergeordnete Elemente übernommene Eigenschaftswerte übernehmen, wenn dies nicht der Fall ist. von anderen Stildeklarationen für verschachtelte Elemente oder in <style>-Blöcken oder Style Sheets überschrieben werden. Da der Wert das Äquivalent des Inhalts enthält, eines einzelnen Stilblocks, der nur auf dieses Element angewendet wurde, kann er nicht für generierten Inhalt, nicht zum Erstellen von Keyframe-Animationen oder zum Anwenden von anderen At-Regeln.

style ist zwar tatsächlich ein globales Attribut, aber seine Verwendung wird nicht empfohlen. Definieren Sie Stile stattdessen in einer oder mehreren separaten Dateien. Das Attribut style kann sich jedoch bei der Entwicklung als nützlich erweisen, um eine schnelle Gestaltung zu ermöglichen, z. B. zu Testzwecken. Nehmen Sie dann „Lösung“ und fügen Sie ihn in die verknüpfte CSS-Datei ein.

tabindex

Sie können jedem Element das Attribut tabindex hinzufügen, damit es in den Fokus rückt. Der Wert tabindex definiert, ob er wird zur TAB-Reihenfolge hinzugefügt und optional in eine nicht standardmäßige TAB-Reihenfolge.

Das Attribut tabindex verwendet als Wert eine Ganzzahl. Ein negativer Wert (die Konvention ist die Verwendung von -1) macht ein Element kompatibel. z. B. über JavaScript, aber das Element wird nicht in die Tabulatortaste eingefügt. Ein tabindex-Wert von 0 macht Das Element ist über die Tabulatortaste erreichbar und fokussierbar. Dadurch wird es zur standardmäßigen TAB-Reihenfolge der Seite in Quellcodereihenfolge hinzugefügt. Ein Wert von 1 oder mehr setzt das Element in eine priorisierte Fokussequenz und wird nicht empfohlen.

Diese Seite enthält eine Funktion zum Teilen über ein benutzerdefiniertes <share-action>-Element, das als <button> fungiert. Der tabindex von null ist enthalten, um das benutzerdefinierte Element in die standardmäßige Tastaturreihenfolge der Tabulatortaste einzufügen:

<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>

Das role von button informiert Screenreader-Nutzer darüber, dass sich dieses Element wie eine Schaltfläche verhalten soll. wird mithilfe von JavaScript sichergestellt, die versprochene Funktionalität der Schaltfläche eingehalten wird; einschließlich der Verarbeitung von click- und keydown-Ereignissen sowie der Eingabetaste und Leertaste.

Formularsteuerelemente, Links, Schaltflächen und Inhalte, die bearbeitet werden können, können hervorgehoben werden. wenn ein Nutzer die Tabulatortaste drückt, Der Fokus wird so zum nächsten fokussierbaren Element bewegt, als wäre tabindex="0" festgelegt worden. Andere Elemente sind standardmäßig nicht fokussierbar. tabindex hinzufügen fokussiert werden können, wenn dies nicht der Fall wäre.

Wenn ein Dokument Elemente mit einem tabindex von 1 oder mehr enthält, sind sie in einer separaten Tabsequenz enthalten. Wie Sie im Codepen sehen, Die Tabulatortaste beginnt in einer separaten Reihenfolge, in der Reihenfolge vom niedrigsten zum höchsten Wert, bevor sie in der Reihenfolge der Quelle in der regulären Sequenz durchlaufen werden.

Eine Änderung der TAB-Reihenfolge kann eine wirklich schlechte User Experience nach sich ziehen. Es ist schwierig, sich bei der Navigation auf Hilfstechnologien wie Tastaturen und Screenreader zu verlassen. für Ihre Inhalte. Außerdem ist die Verwaltung und Wartung für Entwickler schwierig. Konzentration ist wichtig. gibt es ein ganzes Modul, in dem es um Fokus und Reihenfolge geht.

role

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

Es gibt einige gängige UI-Widgets, wie Kombinationsfelder, Menüleisten, Tablisten, und Treesgrids, die kein natives HTML-Äquivalent haben. Wenn Sie beispielsweise ein Designmuster mit Tabs erstellen, werden tab, tablist und tabpanel-Rollen können verwendet werden. Jemand, der physisch sehen kann Die Benutzeroberfläche hat Erfahrung darin, im Widget zu navigieren und verschiedene Bereiche durch Klicken auf die zugehörigen Tabs sichtbar zu machen. Wenn du die Rolle tab in <button role="tab"> einfügst, wenn eine Gruppe von Schaltflächen verwendet wird, um verschiedene Bereiche anzuzeigen, weiß der Screenreader-Nutzer, dass der aktuell hervorgehobene <button> ein zugehöriges Steuerfeld einblenden kann, anstatt eine typische schaltflächenähnliche Funktion zu implementieren.

Das Attribut role wirkt sich nicht auf das Browserverhalten aus und verändert auch nicht die Interaktionen mit Tastatur oder Zeigegerät, sodass role="button" zu einem <span> hinzugefügt wird. nicht in <button>. Aus diesem Grund wird empfohlen, semantische HTML-Elemente für den vorgesehenen Zweck zu verwenden. Wenn Sie jedoch das richtige Element nicht möglich ist, ermöglicht das Attribut role, Screenreader-Nutzer darüber zu informieren, wenn ein nicht semantisches Element nachgerüstet wurde. die Rolle eines semantischen Elements.

contenteditable

Ein Element, bei dem das Attribut contenteditable auf true gesetzt ist, ist bearbeitbar, fokussierbar und wird der TAB-Reihenfolge wie folgt hinzugefügt: tabindex="0" wurden festgelegt. Contenteditable ist ein Aufzählungsattribut, das die Werte true und false mit dem Standardwert inherit unterstützt Das Attribut ist nicht vorhanden oder hat einen ungültigen Wert.

Die folgenden drei öffnenden Tags sind äquivalent:

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

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

Wenn Sie zwischen den Status wechseln möchten, fragen Sie den Wert der schreibgeschützten Eigenschaft HTMLElement.isContentEditable ab.

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

Alternativ kann diese Eigenschaft angegeben werden, indem editor.contentEditable auf true, false oder inherit gesetzt wird.

Globale Attribute können auf alle Elemente angewendet werden, auch auf <style>-Elemente. Sie können Attribute und ein wenig 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, den color von style in einen anderen Wert als inherit zu ändern. Versuchen Sie dann, den style in einen p-Selektor zu ändern. Entfernen Sie die Anzeigeeigenschaft nicht, sonst verschwindet der Stilblock.

Benutzerdefinierte Attribute

Wir haben uns bisher nur an der Oberfläche der globalen HTML-Attribute beschäftigt. Es gibt noch mehr Attribute, die nur für ein oder eine begrenzte Gruppe von Elementen gelten. Auch bei Hunderten definierten Attributen kann es notwendig sein, ein Attribut zu benötigen, das nicht in der Spezifikation enthalten ist. HTML kann Ihnen dabei helfen.

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 Kleinbuchstaben, die nicht mit xml beginnen und keinen Doppelpunkt (:) enthalten.

HTML ist fehlertolerant und funktioniert nicht, wenn Sie nicht unterstützte Attribute erstellen, die nicht mit data beginnen, oder selbst wenn Sie Ihr benutzerdefiniertes Attribut mit xml oder : einfügen, hat das Erstellen gültiger benutzerdefinierter Attribute, die mit data- beginnen, Vorteile. Bei benutzerdefinierten Datenattributen wissen Sie, dass Sie nicht versehentlich einen vorhandenen Attributnamen verwenden. Benutzerdefinierte Datenattribute sind zukunftssicher.

Zwar implementieren Browser kein Standardverhalten für bestimmte Attribute mit dem Präfix data-, aber es gibt eine integrierte Dataset API. um Ihre benutzerdefinierten Attribute zu durchlaufen. Benutzerdefinierte Eigenschaften sind eine hervorragende Möglichkeit, anwendungsspezifische Informationen zu vermitteln. über JavaScript senden. Benutzerdefinierte Attribute zu Elementen im Format data-name hinzufügen und über das DOM mit dataset[name] darauf zugreifen für das betreffende Element.

<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

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

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 (obwohl sie nicht alle Auswirkungen auf dieser Elemente). Als Nächstes werfen wir einen Blick auf die beiden Attribute aus dem Einführungsbild, die wir nicht behandelt haben – target und href – und einige weitere elementspezifische Attribute.

Wissen testen

Testen Sie Ihr Wissen über Attribute.