Javascript data-attribute / dataset

Eigene Attribute in HTML-Tags

Sie liefern Informationen von und zu Content Management Systemen und befreien CSS-Klassen von zusätzlichen Informationen. Diese privaten Attribute lassen sich mit getAttribute lesen und mit setAttribute setzen und ändern.

data-Attribute können in jedes HTML-Element gesetzt werden und beginnen grundsätzlich mit data-:

<section data-section-key="17" data-title="Private Attribute">…</section> 
<section data-section-key="18" data-title="dataset">…</section> 
<section data-section-key="22" data-title="CSS">…</section> 

const section = document.querySelectorAll("section");
for (item of section) {
	console.log (item.getAttribute("data-title"));
}

Private Attribute
dataset 
CSS

Neben dem data-*-Präfix darf das data-Attribut nur Buchstaben, Ziffern, Bindestrich, Punkt, Doppelpunkt und Underscore enthalten, aber keine Großbuchstaben.

data-Attribute können mit getAttribute ausgelesen und mit setAttribute gesetzt werden.

dataset statt getAttribute

Direkter und einfacher als elem.getAttribute greift die Eigenschaft dataset. Alle modernen Browser, IE ab Version 11.

let section = document.querySelectorAll("section");
for (item of section) {
	console.log (item.dataset.sectionKey)
}

Wenn das Data-Attribut mit Bindestrichen geschrieben ist (so wie hier data-section-key), wird es im camelCase geschrieben. Camel Case eliminiert Bindestriche und schreibt das folgende Zeichen in Großbuchstaben. Der Präfix data- entfällt ersatzlos. Aus data-system-key wird systemKey.

data – Alternative zum data-* Attribut

Das HTML data-Tag ist ein relativ junges HTML-Element mit einem value-Attribut, das ebenfalls maschinenlesbare Informationen / Daten zu Inhalten liefert.

• 
  Bürste Minimale
  €16,00
  Aktionspreis €12,00 (nur diese Woche)
• 
  Handtücher Lomostrick
  €17,20
  Aktionspreis €13,90 (nur diese Woche)

<div class="sku">
	<data value="477244">Bürste Minimale</data>
</div>
<div class="price">
	<del>
		<data value="euro">€</data><data value="16.00">16,00</data>
	</del>
</div>
<div class="sale">
	Aktionspreis <data value="euro">€</data><data value="16.00">12,00</data> 
	<data class="week" value="19">(nur diese Woche)</data>
</div>

Data Attribute und CSS

Obwohl data-Attribute generell für den Benutzer nicht sichtbar sind, können Sie dem Benutzer durch etwas CSS bereitgestellt und mittels Attribut-Selektor gestylt werden:

section[data-section-key="22"] h2 { 
	border-bottom: 2px solid orange;
}

Am Rande: Die Werte eines data-Attributs sind immer Strings, auch wenn im Beispiel hier eine Zahl notiert ist und muss mit parseInt bzw parseFloat interpretiert werden, um als Zahl zu gelten.

Event Listener

Genauso wie reguläre Attribute steht ein data-Attribut für EventListener zur Verfügung.

let button = document.querySelector ("button[data-button-key='20']");
button.addEventListener ("click", function () {
	console.log (this.dataset.buttonKey)
})

Array oder Object als data-Attribut?

Auch wenn Data-Attribute nur Strings enthalten dürfen, können wir Arrays im Dataset speichern. So wie parseInt und parseFloat den Wert des datasets als Zahl interpretieren, wandelt JSON.parse() den String in ein Array um.

Wichtig ist nicht nur, dass die Array-Werte in eckige Klammern gesetzt werden, sondern auch in doppelte Hochkommas. So will JSON das ….

<div id="arr" data-array='["Hund", "Katze", "Maus"]'></div>

const arr = document.querySelector("#arr");
const realArr = JSON.parse(arr.dataset.array);
console.log ("Array?", Array.isArray(realArr)); // Array? true
console.log ("realArr", realArr);      // realArr ["Hund", "Katze", "Maus"]

Mit demselben Verfahren liest JSON.parse ein data-Attribut als Objekt ein.

<div id="dog" data-dogs='{"rasse":"Foxterrier", "name":"Freddy", "farbe":"schwarzweiß"}'></div>

const dogs = JSON.parse (document.querySelector("#dog").dataset.dogs);
console.log (dogs.rasse) // Foxterrier