CSS, HTML und Javascript mit {stil}

Javascript getAttribute, setAttribute, removeAttribute

parent node, child node, siblings

setAttribute, getAttribute und removeAttribute erzeugen, lesen und ändern HTML-Attribute von class, style über src und href bis value konsistent und sicher.

Elementknoten haben Attribute – entsprechend den Attributen des HTML-/XML-Tags – und diese Attribute werden in Javascript als Eigenschaften des Element-Objekts aufgefasst.

Elementknoten stellen die gebräuchlichsten Knotentypen im DOM-Baum und sind der programmtechnische Spiegel der HTML-/XML-Tags.

Attribute sind keine childNodes des Elements, haben kein Parent oder Sibling-Element. Attribute werden als Eigenschaften des Elements betrachtet und weniger als als Objekt.

  • getAttribute (attributeName)
  • setAttribute (attributeName, attributeValue)
  • removeAttribute (attributeName)
  • getAttributeNode (name)
  • setAttributeNode (newAttribute)
  • removeAttributeNode (oldAttribute)
  • getAttributeNS (namespaceURI, localName)
  • setAttributeNS (namespaceURI, qualifiedName, value)
  • removeAttributeNS (namespaceURI, localName)
  • getAttributeNodeNS (namespaceURI, localName)
  • hasAttribute (name)
  • hasAttributeNS (namespaceURI, localName)

Daneben gibt es Funktionen, die bestimmte Attribute direkt erreichen.

  • elem.id
    Setzt das id-Attribut oder gibt den Wert des id-Attriubts zurück
  • elem.className
    Setzt den Wert des class-Attributs oder gibt den Wert zurück
  • elem.accessKey
    Setzt oder liest das accesskey-Attribut
  • elem.dir
    Setzt das dir-Attribut eines Elements oder gibt den Wert des dir-Attributs zurück
  • elem.lang
    Setzt den Wert des lang-Attributs
  • elem.style
    Setzt das style-Attribut eines Elements oder gibt den Wert des Attributs zurück
  • elem.tabIndex
    Setzt oder ändert den Wert des tabindex-Attributs eines Elements
  • elem.title
    Setzt den Wert des title-Attributs eines Elements oder gibt ihn zurück

Die sichersten und meistgenutzen Javascript-Methoden sind setAttribute() und getAttribute() – früher mit der Einschränkung, dass IE 6 / IE 7 das style-Attribut nicht erkannten. Stattdessen musste elem.style benutzt werden.

Ab IE8 funktionieren die Methoden setAttribute und getAttribute.

getAttribute()

Javascript getAttribute(attributeName) gibt einen String mit dem Wert des Attributs attributeName zurück. Wenn der Attributname nicht existiert, gibt die Javascript-Methode getAttribute() null zurück.

<div id="jsatt1" style="border: 1px solid silver; …"></div>

Die erste Anweisung liefert das Element elem anhand seines id-Attributs att1. var att = elem.getAttribute('style'); liest den Wert des Attributs 'style' in die Variable att. Am Ende wird der Wert von att ausgegeben.

var att = document.getElementById('att1').getAttribute('style');

setAttribute()

Javascript setAttribute(attributeName, attributeValue) setzt das Attribut attributeName auf den Wert attributeValue.

Wenn bereits ein Attribut mit dem Namen attributeName im Element existiert, wird der Wert des Attributs auf den Wert von attributeValue geändert, wenn das Attribut noch nicht existiert, wird es erzeugt. attributeValue ist ein String und wird beim Setzen nicht geparst.

Read the manual, Luke, read the manual

Das Skript sucht das Element mit der id attf2, erzeugt ein neues title-Attribut durch die Anweisung elem.setAttribute('title', 'Obi Web Kenobi'); sowie ein class-Attribut und ein frei erfundenes Attribut foo.

if (document.getElementById('attf2')) {
   var elem = document.getElementById('attf2');
   elem.setAttribute('title', 'Obi Web Kenobi');
   elem.setAttribute('class', 'farbe');
   elem.setAttribute('className', 'farbe');
   elem.setAttribute('foo', 'foofoo');
} 

Das setAttribute className steht noch für alte Versionen von IE, die das class-Attribut in setAttribute nicht erkannten.

setAttributes

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

function setAttributes(el, attrs) {
  for(var 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(attributeName) entfernt ein Attribut.

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

Die erste Anweisung sucht den Elementknoten mit der id attf3, die folgenden Anweisungen entfernen sukzessive die Attribute style, class, title und foo. Der Aufruf von elem.removeAttribute('foo'); führt nicht zu einem Fehler, obwohl das Attriubt nicht existiert.

function removeAttribute() {
   if (document.getElementById('attf3')) {
      var elem = document.getElementById('attf3');
      elem.removeAttribute('style');
      elem.removeAttribute('class');
      elem.removeAttribute('title');
      elem.removeAttribute('foo');
   } else {
      alert('Fehler: Kann kein Element mit der ID attf3 finden');
   }
}

getAttributeNode()

Javascript getAttributeNode(name) erwartet den Namen eines Attributs als String gibt das Attribut-Objekt mit dem Namen name zurück.

<img id="attf4" src="bird.png" alt="" 
     width="190" height="121" 
     style="border:4px dotted brown;border-radius:12px">

Das Skript liest die Attribut-Objekte height und style des IMG-Elements und gibt Knotentyp, Knotenname und den Wert des Knotens zurück.

document.getElementById('jsattF4').onclick = function () {
   if (document.getElementById('attf4')) {
      var elem = document.getElementById('attf4');
      var attrH = elem.getAttributeNode('height');
      var attrS = elem.getAttributeNode('style');
      var text = 'nodeType '  + attrH.nodeType + "<br>" + 
         'nodeName '  + attrH.nodeName + "<br>" + 
         'nodeValue ' + attrH.nodeValue + "<br>" +
         'nodeType '  + attrS.nodeType + "<br>" + 
         'nodeName '  + attrS.nodeName + "<br>" + 
         'nodeValue ' + attrS.nodeValue;
      if (document.getElementById('msg')) {
         document.getElementById('msg').innerHTML = text;
      }
   } 
}

setAttributeNode()

Javascript setAttributeNode(newAttribute) setzt ein zuvor erzeugtes Attribut in einen Elementknoten.

Ein Neger mit Gazelle zagt im Regen nie.
var diratt = document.createAttribute('dir');
diratt.nodeValue = "rtl";
document.getElementById('textdir').setAttributeNode(diratt);

Das Script erzeugt ein neues Attribut »dir«, weist dem Attribut den Wert »rtl« zu und setzt das Attribute in den Elementknoten mit der id »textdir«.

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.

  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 () {
	var dir = document.querySelectorAll("li[dir='rtl']");
	for (var i=0; i<dir.length; i++) {
		dir[i].removeAttribute("dir");
	}
}

IE 6 / IE 7 unterstützt die Methode removeAttributeNode() nicht. Erst IE 8 funktioniert ordnungsgemäß.

hasAttribute()

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.

function hasAttribute() {
   var allForms = document.getElementsByTagName('button');
   var get = true;
   var text = "";
   for (var i=0; i<allForms.length; i++) {
      if (!allForms[i].hasAttribute('id')) {
         get = false;
         text += text + 'button-Tag ' + allForms[i].getAttribute('id') + 
               ' hat kein id-Attribut \n';
      }
   }
   if (get === false) { alert(text); } else { alert('Alles OK'); }
}