Changing attributes

Attribute sind zusätzliche Werte im HTML-Tag. Es gibt eingebaute Attribute, die das Verhalten des Tags beeinflussen, und custom attributes, die wir selbst definieren können.

Built-in attributes

id, class, hidden, … sind eingebaute Attribute (siehe auch HTML attribute reference).

Custom attributes

Mit eigenen Attributen, data-attribute, können wir jede beliebige Information im HTML-Tag speichern. Drei Dinge müssen bei der Namensgebung beachtet werden:

• Custom attributes beginnen immer mit dem data- Prefix.
• Custom attributes dürfen nur Kleinbuchstaben, Ziffern, Bindestrich, Underscore, Punkte und Doppelpunkte enthalten.
• Custom attributes dürfen keine Großbuchstaben enthalten.

True when present

Attribute folgen ihren eigenen Regeln. Sind sie vorhanden, sind sie true. Egal, ob vielleicht hidden="false" dahinter steht oder nicht.

Caution

Bei custom attributes muss dieses Verhalten immer berücksichtigt werden! Fallstrick!

Setting Attributes

Um ein Attribut hinzuzufügen oder es zu ändern, verwenden wir die setAttribute() Methode. Diese Methode nimmt zwei Argumente an: den Namen und den Wert des Attributes. Booleans werden natürlich nicht in Anführungszeichen geschrieben!
Auch custom attributes können mit dieser Methode gesetzt werden.

Danger

Aufpassen, hier ist was zu beachten: man muss den Wert angeben, auch wenn es dem Attribut selbst egal ist, ob es true oder false ist. Nochmal genau abchecken in den DevTools! Oder muss man remove nehmen statt false setzen …

Element.setAttribute('name-of-attribute', 'value');

button.setAttribute('type', 'submit');
button.setAttribute('data-color', 'yellow');
checkbox.setAttribute('checked', true);

Getting/reading Attributes

Um ein Element auszulesen, verwenden wir die Methode getAttribute(). Sie akzeptiert ein Argument, den Namen des Attributs und sie funktioniert für eingebaute und custom attributes.

<div class="clown-hat" data-color="red" data-num-stripes="3">A clown hat</div>

const clownHat = document.querySelector('.clown-hat');
const clownHatColor = clownHat.getAttribute('data-color');         // 'red'
const clownHatStripes = clownHat.getAttribute('data-num-stripes'); // '3'

Wichtig dabei: alle Attributwerte sind Strings. Wenn ein Attribut eine Zahl als Wert hat, kann sie mit parseInt zurückgewandelt werden.

const clownHatStripes = parseInt(clownHat.getAttribute('data-num-stripes'));  // 3

Dataset

Mit dataset können wir zwar nur custom attributes setzen und auslesen, das dafür aber einfacher als mit set/getAttribute.

Das funktioniert so: jedes custom attribute verfügt automatisch über die Eigenschaft dataset. Mit der dot notation kann nun der Wert jedes einzelnen custom attributes gesetzt und gelesen werden. Aufpassen auf die Schreibweise: data-num-stripes wird zu dataset.numStripes (camelCase). Mit dataset müssen wir auch keine Strings in Zahlen umwandeln.

Element.dataset;
// setting:
Element.dataset.color = "limegreen";

const clownHatColor = clownHat.dataset.color;
const clownHatStripes = clownHat.dataset.numStripes;

TODO Destructuring data attributes

siehe Calculator

Removing attributes

Um Attribute zu entfernen, benutzen wir die Methode removeAttribute. Diese funktioniert mit built in und custom attributes.

Element.remove('attribute-name');