JavaScript/DOM/Element/setAttribute

Die Methode Element.setAttribute setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt.

Syntax

element.setAttribute(name, wert);

• name: Name des Attributs, das hinzugefügt oder geändert werden soll ( als Zeichenkette)
• wert: der gewünschte neue Wert des Attributs.

Beachten Sie: Die setAttribute-Methode ist Teil der Element-Programmierschnittstelle, die Teil der DOM-Spezifikation ist und von HTML oder konkreten HTML Elementtypen nichts weiß. Deshalb können Sie mit dieser Methode beliebigen Elementen beliebige Attribute zuordnen, ganz gleich, ob diese Elemente mit dem Attribut etwas anfangen können.

HTML-Elemente besitzen Programmierschnittstellen, die eine Erweiterung von Element darstellen und für diejenigen Attribute, die für HTML Element definiert sind, eigene Objekteigenschaften bereitstellen und den Attributwert, sofern möglich, auch aufbereiten. Diese Objekteigenschaften sind mit den Attributwerten synchronisiert, d. h. wenn Sie mit setAttribute das name-Attribut verändern, passt sich die name-Eigenschaft des Objekts automatisch an – und umgekehrt. Bei booleschen oder numerischen Attributwerten stellen die Objekteigenschaften den jeweiligen Attributzustand bereits als booleschen oder numerischen Wert dar, während Sie bei Verwendung von getAttribute und setAttribute genau wissen müssen, wie Sie mit dem Attribut umgehen müssen.

Nutzen Sie nach Möglichkeit die Objekteigenschaften. Ausnahme ist die aria-Attributfamilie, die nur über setAttribute zugänglich ist. Einige andere Attribute werden von den HTML-Elementen in interpretierter Form bereitgestellt, z.B. style als CSSStyleDeclaration oder href als normalisierte URL. Wenn Sie auf deren echten Attributtext zugreifen wollen, müssen Sie getAttribute und setAttribute verwenden. Sie sollten sich dann aber fragen, ob Sie das Richtige tun.

Anwendungsbeispiele

ausgegraute Felder durch Akzeptieren der AGB aktivieren

Formular ansehen …

  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('ablehnen').checked = true;
    document.querySelector('#agb').addEventListener('click', weiter);
 
    function weiter() {	  
      if (document.getElementById('akzeptieren').checked  == true) {
        document.getElementById('persAngaben').removeAttribute('disabled');
      }
      if (document.getElementById('ablehnen').checked  == true) {
        document.getElementById('persAngaben').setAttribute('disabled','disabled');
      }
    }
  
  });

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Erst wenn Benutzer die AGB akzeptieren, wird das ausgegraute Formular freigeschaltet.

document.getElementById('ablehnen').checked = true; setzt den Ablehnen-Button auch beim Neuladen wieder auf true , d. h. auf AGB ablehnen.
Mit AddEventListener wird an das fieldset mit der id persAngaben ein Event-Handler angehängt, der bei einem Klick die Funktion weiter() aufruft.

In dieser Funktion wird überprüft, ob der Akzeptieren-Radio-Button angeklickt wurde. Dann wird das ausgegraute fieldset aktiviert, indem das disabled-Attribut mit der Methode removeAttribute entfernt wird. Wenn der Benutzer wieder auf "Ablehnen" geht, wird das disabled-Attribut mit setAttribute wieder gesetzt.

Passwort sichtbar machen

Damit niemand bei einem Blick über die Schulter das Passwort erfahren kann, zeigen Passwortfelder nicht die Eingabe, sondern nur Platzhalter an.

Oft ist man jedoch allein zuhaus, möchte sich aber vor dem Absenden vergewissern, ob die Eingabe richtig war.

Passwort sichtbar machen ansehen …

  <form>
    <label for="email">E-Mail</label>
    <input type="email" id="email" required placeholder="test@test.de">
 
    <label for="passwd">Passwort</label>
    <input type="password" id="passwd" required autocomplete="off">
 
    <button id="check" type="button">Passwort sichtbar machen</button>
    <button class="ok" type="submit">anmelden</button>    
  </form>

Das Formular enthält je ein Eingabefeld für die E-Mail-Adresse und für eine Passworteingabe. Damit das Passwortfeld im sichtbaren Modus nicht durch die Autovervollständigung ausgefüllt wird, erhält es neben dem required-Attribut noch ein autocomplete="off"-Attribut. Um zu verhindern, dass eine erweiterte Rechtschreibprüfung in diesem Fall das Passwort (gegen einen Webservice) prüft, ist spellcheck="false".

  document.querySelector('#check').addEventListener('click', function () {
	  if (document.getElementById('passwd').type == 'password' ) { 
	    document.getElementById('passwd').type = 'text';
	    this.innerText = 'Passwort verstecken'; 
	  }
	  else {
	    document.getElementById('passwd').type = 'password';
	    this.innerText = 'Passwort sichtbar machen'; 
	  }
  });

Das Beispiel enthält ein Formular mit einem Passwortfeld. Durch einen Klick auf den Button wird das type-Attribut des input-Felds auf type="text" geändert. Der eingegebene String wird so sichtbar.

Anstelle des Punktoperators können Sie auch setAttribute() verwenden:

document.getElementById('passwd').setAttribute('type', 'text');

Weblinks

• W3C: Document Object Model Core setAttribute
• MDN: element.setAttribute