Javascript getAttribute

Javascript: Wert eines Attributs auslesen mit getAttribute

elem . getAttribute (attributeName) gibt einen String mit dem Wert des Attributnamen attributeName zurück. Wenn der Attributname nicht existiert, gibt getAttribute () null zurück.

getAttribute liest Attribute wie class, contentEditable, style bis hin zu selbstdefinierten data-Attributen wörtlich und gibt den Wert des HTML-Attributs zurück.

Attribute von HTML-Tags werden in Javascript als Objekte mit Eigenschaften und Methoden aufgefasst. 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

Die allgemeine Empfehlung lautet, Eigenschaften direkt statt mit getAttribute zu nutzen: elem.style, elem.title, elem.id. Erst wenn wichtig ist, was wörtlich im HTML-Attribut steht, ist getAttribute() angebracht.

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.

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.


Ändern
<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.

document.getElementById("hasid").onclick = function () {
   let buttons = document.getElementsByTagName('button');
   let text = "";
   for (let i=0; i<buttons.length; i++) {
      if (!buttons[i].hasAttribute('id')) {
         text += text + 'button-Tag ' + i + 
               ' hat kein id-Attribut \n';
      }
   }
   console.log (text);
}



getAttribute elem.attribute