Javascript setAttribute, Attribute erzeugen oder überschreiben

elem.setAttribute

HTML-Attribute sind Name / Wert -Paare, so wie sie direkt im HTML-Markup stehen. Sie haben viele Gemeinsamkeiten und Überschneidungen mit den Eigenschaften von DOM-Objekten. Das id-Attribut ist ein Beispiel für ein 1:1-Äquivalent.

Wenn die Seite im Browser geladen ist, werden HTML-Elemente zu DOM-Objekten. Die Objekte des DOM haben Eigenschaften.

Javascript bietet drei Methoden, um HTML-Attribute bzw. Eigenschaften von Objekten zu setzen und zu ändern:

elem.setAttribute("title","Jedi Ritter")

Zugriff auf das title-Attribut des HTML-Tags

elem.title = "Jedi Ritter" oder elem.style.fontFamily = "Lobster, cursive"

ändert die jeweilige Eigenschaft (Property) des DOM-Objekts direkt

elem.dataset.myattribute

Attribute, deren Name mit data- beginnt

Die allgemeine Empfehlung für den Zugriff mit Javascript lautet, Eigenschaften direkt anstelle des Zugriffs via setAttribute zu nutzen: elem.style, elem.title, elem.id …

HTML-Attribute direkt ändern

Einige DOM-Eigenschaften entsprechen direkt HTML-Attributen, aber es gibt auch DOM-Eigenschaften oder Properties, die keinem HTML-Attribut entsprechen.

title, style und id sind Beispiele für Eigenschaften, die mit einem HTML-Attribut übereinstimmen. Sie sollen vorzugsweise direkt als Eigenschaft geändert werden:

<section title="Neuer Absatz">
<h1 style="font-family: Lobster">
<header id="foo">

document.querySelector("h1").style.fontFamily = "Lobster";
…
const section = document.querySelectorAll("section");
section.forEach(item => {
	section.title ="oh lala"
})
…
document.querySelector("header").id = "foo";

So, nachdem geklärt ist, wo besser der direkte Zugriff über elem.property werden sollte: Wo ist setAttribute angebracht?

setAttribute bei Attributen ohne Wert

setAttribute kommt zum Zuge, wenn das Attribut einen Namen hat, aber keinen Wert. Das ist z.B. der Fall bei selected, checked, disabled, required.

<select id="selectbox">
   <option>C0 - Option</option>
   <option>C1 - Option</option>
   <option>C2 - Option</option>
   <option>C3 - Option</option>
</select>

document.querySelectorAll("#selectbox option")[2].setAttribute("selected","");

XML- und SVG-Elemente stecken voller Eigenschaften, die ohne äquivalentes Attribut existieren.

setAttribute bei data-Attributen

Selbstdefinierte data-Attribute richten nicht direkt an Benutzer, sondern an Anwendungen und Scripte und fügen dem HTML-Tag keine weiteren Merkmale hinzu. Für data-Attribute gibt es kein HTML-Äquivalent.

document.querySelector(".amend").setAttribute ("data-system-path","/system/setup/");

getAttribute (elem) vs elem.value

Wenn ein Standard-Attribut (z.B. id oder value) durch elem.value = bar oder durch die Eingabe in ein Formularfeld geändert wird, ändert sich die entsprechende Eigenschaft.

input.value übernimmt den neuen Wert des Attributs in die Eigenschaft, aber getAttribute bleibt bei dem Wert, der im HTML steht und wird nicht synchronisiert.

Wird ein Wert programmatisch durch setAttribut geändert (z.B. setAttribute("title") = "Zamundu"), liefert getAttribute den geänderten Wert.

<input type="text" value="Obi Web Kenobi" id="form" />

const form = document.querySelector("#form");
form.setAttribute("value","Luke Skywalker");
	
form.onblur = function () {
   console.log ( form.getAttribute("value"));
   console.log ( form.value );
}

• Das Ändern eines Attributs führt zu einem Update der Eigenschaft.
• Änderungen der Eigenschaft haben keine Auswirkungen auf das Attribut.

In gewisser Weise ist dieses Verhalten ein Feature. Wenn der Benutzer den Wert geändert hat, hat getAttribute weiterhin Zugriff auf das Original.

setAttributes – mehrere Attribute setzen

Um mehrere Attribute mit einem Aufruf zu setzen, braucht Javascript eine Hilfsfunktion.

function setAttributes(el, attrs) {
  for(let key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}
setAttributes(elem, {
  "src": "http://example.com/something.jpeg",
  "height": "100%",
  "height": "100%"
});

Quelle Stackoverflow

removeAttribute ()

Javascript removeAttribute (name) entfernt ein Attribut.

<div id="pretty" style="height: 80px" class="pretty" title="Weg damit"></div>

Die Anweisungen entfernen nacheinander die Attribute style, class, title und foo.

elem.removeAttribute("style");
elem.removeAttribute("class");
elem.removeAttribute("title");
elem.removeAttribute("foo");

Der Aufruf von elem.removeAttribute('foo'); führt weder zu einem Fehler noch einer Warnung, obwohl das Attribut "foo" nicht existiert.

Kaum benutzt: removeAttributeNode ()

Javascript removeAttributeNode(object) entfernt das Attribut-Objekt object aus dem Element und gibt das entfernte Objekt zurück. Wenn das entfernte Attribut einen Vorgabewert hat, wird es direkt durch den Vorgabewert ersetzt.

Im Unterschied zu removeAttribute() (das ein Attribut mittels seines Namens entfernt) ist das Argument in removeAttributeNode ein Objekt.

Das Ergebnis ist in beiden Fällen dasselbe, aber removeAttributeNode() gibt das gelöschte Attribut als Attribut-Objekt zurück.

1. Fischers Fritz fängt frische Fische.
2. Zwischen zwei Zwetschkenbäumen zwitscherten zwei Schalben.

<ol>
   <li dir="rtl">Fischers Fritz fängt frische Fische.</li>
   <li dir="rtl">Zwischen zwei Zwetschkenbäumen … </li>
</ol>

Mit querySelectorAll ("li[dir='rtl']") sammelt Javascript alle li-Elemente mit dem Attribut dir="rtl". Im Block der for-Anweisung entfernt das Script das Attribut aus jedem gefundenen Element.

document.querySelector("#remove").onclick = function () {
   const dir = document.querySelectorAll("li[dir='rtl']");
   for (let i=0; i<dir.length; i++) {
      let object = dir[i].getAttributeNode("dir");
      dir[i].removeAttributeNode(object);
   }
}