Javascript getAttribute – Werte von Attributen auslesen

HTML-Attribute

getAttribute liest Attribute wie class, contentEditable, style bis hin zu selbstdefinierten data-Attributen wörtlich und gibt den Wert des HTML-Attributs zurück. Wenn der Browser das HTML-Element gelesen und geparst hat, wird es ein Objekt des Document Object Modell. Javascript fasst Attribute von HTML-Tags Eigenschaften des Objekts auf. Javascript spiegelt die meisten Standard-Attribute von HTML-Tags beim Laden der Seite als Eigenschaften des DOM-Objekts.

elem.getAttribute("class") // gibt den Wert von class zurück
elem.getAttribute("numbo") // gibt null zurück

Javascript hat drei Methoden, den Wert eines Attributs auszulesen.

elem.getAttribute("id")

// wie es im HTML steht

elem.id

// Eigenschaft des DOM-Objekts direkt auslesen

elem.dataset.myattribute

// Attribute, deren Name mit data- beginnt

elem.getAttribute gibt den Wert eines HTML-Attributs zurück, unabhängig davon, ob es über Inline-Stile oder andere Eigenschaften festgelegt wurde. Wenn wichtig ist, was wörtlich im HTML-Attribut steht, ist getAttribute() angebracht.

elem.style, elem.title, elem.id geben ebenfalls die entsprechenden Werte des Attributs zurück. Diese Methoden gibt es für fast alle HTML-Attribute wie style, src, alt, height, value, aber für die HTML-Attribute class und for gelten elem.className und elem.htmlFor, für data-Attribute elem.dataset. Die Attribute disabled, readonly, multiple kann JavaScript nur mit getAttribut abrufen.

toggleAttribute

Wenn Attribute nur zwei Werte annehmen können – Boolean Attribute – hat Javascript toggleAttribute im Angebot, das ein Boolean-Attribut wie checked oder selected entfernt, wenn es gesetzt ist oder hinzufügt, wenn es nicht gesetzt ist. Unterstützt von allen modernen Browsern (nein, natürlich nicht von IE11).

Beispiele für solche Attribute:

• async
• defer
• disabled
• checked
• multiple
• muted
• open
• readonly
• required
• selected

Attribute, die kein Standard sind

Daneben gibt es Attribute, die nicht zum HTML-Standard zählen und nicht jedes Attribut ist ein Standard für jedes HTML-Tag.

<div id="dalmatiner" value="101 Dalmatiner" data-color="Schwarz-Weiß"></div>

document.querySelector('#dalmatiner').value   // value ist kein Standard-Attribut für das div-Tag
data-color="Schwarz-Weiß"                     // data-Attribute sind keine Standard-Attribute

value ist kein Standard-Attribut für das div-Tag und div.value würde undefined zurückgeben. Ähnlich steht es um data-Attribute: Sie sind valide HTML-Attribute, aber kein Standard und geben bei einem direkt Zugriff ebenfalls undefined zurück.

getAttribut und href

Bis auf wenige Ausnahmen gibt es wenige sinnvolle Aufgaben für getAttribute, denn überall dort, wo eine Eigenschaft ein HTML-Attribut spiegelt, wird die Eigenschaft vorzugsweise direkt als elem.property gelesen (z.B. elem.id, elem.value).

Neben den Attributen, die kein Standard sind, gibt es noch das href-Attribut wie in

<a href="/javascript/style.html">

elem.href wird hier nicht /javascript/style.html zurückgeben, sondern https://www.mediaevent.de/javascript/style.html.

Das <a>-Element unterliegt dem HTMLHyperlinkElementUtils-Interface, einer Sammlung von Hilfseigenschaften wie protocol und hash und eben href. href gibt nicht den wörtlichen Inhalt des Attributs zurück, sondern den String mit der vollständigen URL.

Wenn wir wissen wollen, was wirklich im HTML-Attribut geschrieben steht, haben wir eine Anwendung für getAttribute.

attributes – welche Attribute hat das Element?

elem.attributes gibt kein Array, sondern eine Nodelist – eine Sammlung aller Attribute des Elements zurück. Das Ergebnis kann in den verschiedenen Browsern unterschiedlich ausfallen.

<img loading="lazy" class="boots" 
       sizes="(max-width:720px) 100vw, (max-width: 1260px) 70vw, calc(50vw - 100px)"
       srcset="img/boots-460.jpg 460w,  
            img/boots-920.jpg 920w, 
            img/boots-1260.jpg 1260w"
         src="img/boots-460.jpg"
		 width="460" height="325"
		 alt="Responsive Image Attributes">

const attribs = document.querySelector(".boots").attributes;
console.log (attribs);

NamedNodeMap {0: loading, 1: class, 2: sizes, 3: srcset, 4: src, 5: width, 6: height, 7: alt, loading: loading, class: class, sizes: sizes, srcset: srcset, src: src, …}

0: loading
1: class
2: sizes
3: srcset
4: src
5: width
6: height
7: alt
alt: alt
class: class
height: height
length: 8
loading: loading
sizes: sizes
src: src
srcset: srcset
width: width

Attribute von input-Elementen auslesen

Wenn ein Standard-Attribut (z.B. id) geändert wird, ändert sich auch die entsprechende Eigenschaft und umgekehrt. input.value übernimmt allerdings den Wert des Attributs in die Eigenschaft, aber nicht umgekehrt.

<input type="text" id="foo" data-something="something" value="bar">

Beim Ändern des Eingabefelds bleibt foo.getAttribute("value") unverändert – getAttribute gibt den Wert von Attribute so wieder, wie er wörtlich im HTML steht.

foo.value ist die Eigenschaft des Element-Objekts und wird durch eine Eingabe geändert. Der geänderte Wert wird nicht in das HTML-Attribut übernommen. In den meisten Fällen ist darum das direkte elem.property für den programmatischen Zugriff mt Javascript die bessere Option.

getAttribute und setAttribute werden benutzt, wenn der literale (wörtliche) Wert gebraucht wird – so wie er im HTML steht.

hasAttribute()

Neben setAttribute und getAttribut gibt es zwei weitere Methoden für Attribute.

elem.hasAttribute

prüft, ob das Attribut existiert.

elem.removeAttribute

löscht das Attribut

Javascript hasAttribute(name) prüft, ob ein Elementknoten ein bestimmtes Attribut besitzt.

Das Skript durchsucht alle BUTTON-Elemente dieser Seite und prüft, ob sie ein ID-Attribut haben.

const buttons = document.getElementsByTagName('button');
let text = "";
for (let i=0; i<buttons.length; i++) {
	if (buttons[i].hasAttribute ("id")) {
		text += `button-Tag ${i} ${buttons[i].getAttribute ("id")} <br>`;
	} else {
		text += `button-Tag ${i} hat kein id-Attribut <br>`;
	}
}
document.getElementById("retval").innerHTML = text;