DOM-Manipulation - Attributknoten

1. Methoden oberhalb des node-Objektes

Analog zu createElement gibt es innerhalb des document-Objektes auch eine Methode zum Erzeugen von Attributknoten, die folgerichtig dann auch so heißt:

createAttribute

Und genau wie beim schon erwähnten createElement wird auch hier nur ein Verweis erzeugt, den man dann einhängen kann. Den Wert setzt man dann, wie gehabt, mit nodeValue. Weitere Details hierzu kommen gleich.

namen           = document.createAttribute('name');
namen.nodeValue = 'blubber';

2. Die Attribute-Methoden

Bei den folgenden drei Methoden wird ausschließlich mit Zeichenketten gearbeitet. Man muss sich das so vorstellen, als ob man auf den Inhalt eines Textknotens zugreift. In etwa.

setAttribute

Damit kann man einem Elementknoten ein Attribut verpassen. Ist dieses schon vorhanden, so wird es überschrieben, ansonsten neu angelegt. Diese Methode benötigt zwei Parameter, erst das Attribut, dann den Wert. Bei HTML-Dokumenten kann man an Attributen alles nehmen, was für das entsprechende Tag erlaubt ist.

<div id="rahmen"><p>bla blubb jodelblah</p></div>
...
absatz = document.getElementById('rahmen').firstChild;
absatz.setAttribute('align', 'center');

getAttribute

Liefert den Wert eines bestimmten Attributes, über das ein Elementknoten verfügt. Bei dieser Methode muss man als einzigen Parameter den Namen des gewünschten Attributes angeben.

<div id="rahmen"><p align="center">bla blubb jodelblah</p></div>
...
absatz = document.getElementById('rahmen').firstChild;
alert (absatz.getAttribute('align'));

removeAttribute

Entfernt ein Attribut aus einem Elementknoten.

<div id="rahmen"><p align="center">bla blubb jodelblah</p></div>
...
absatz = document.getElementById('rahmen').firstChild;
absatz.removeAttribute('align');

3. Die AttributeNode-Methoden

Hier wird im Gegensatz zu den Attribute-Methoden mit Objekten gearbeitet, ... und mit deren Referenzen. Das bedeutet, dass man es hier mit echten Knotenelementen (den schon erwähnten Attributknoten) zu tun hat und zusätzliche Eigenschaften bzw. Methoden benutzen muss.

setAttributeNode

Hängt einen Attributknoten in ein HTML-/XML-Dokument ein. Ist der schon vorhanden, so wird der bereits bestehende überschrieben. Zuvor muss allerdings per createAttribute und nodeValue ein entsprechender Attributknoten erzeugt werden. Dieser ist dann der benötigte Parameter.

<div id="rahmen"><p>bla blubb jodelblah</p></div>
...
absatz   = document.getElementById('rahmen').firstChild;
ausricht = document.createAttribute ('align');
ausricht.nodeValue = 'center'
absatz.setAttributeNode(ausricht);

getAttributeNode

Liefert die Referenz auf einen bestehenden Attributknoten, ansonsten wird ein null zurückgegeben. Den Wert muss man analog zu obigem Beispiel mit nodeValue auslesen.

<div id="rahmen"><p align="center">bla blubb jodelblah</p></div>
...
absatz = document.getElementById('rahmen').firstChild;
inhalt = absatz.getAttributeNode('align');
alert (inhalt.nodeValue);

removeAttributeNode

Entfernt einen Attributknoten. Als Parameter benötigt man eine Referenz darauf.

<div id="rahmen"><p align="center">bla blubb jodelblah</p></div>
...
absatz = document.getElementById('rahmen').firstChild;
inhalt = absatz.getAttributeNode('align');
absatz.removeAttributeNode(inhalt);

4. Obacht!

Weil man es bei den Attribute-Methoden mit Strings und bei den AttributeNode-Methoden mit Objekten zu tun hat, muss man Folgendes beachten. Wenn man zum Beispiel ein Attribut mit setAttribute erzeugt, so kann man es nicht mit removeAttributeNode löschen. Dazu benötigt man removeAttribute. Umgekehrt verhält es sich genauso. Also sollte man sich für eine Variante entscheiden und die konsequent nutzen.

Ein Tipp

Natürlich sind die Attribute-Methoden wesentlich einfacher zu handhaben, da man es mit popeligen Zeichenketten zu tun hat. Wer aber bis dato eh so seine Probleme mit der DOM-Manipulation hatte, sollte sich erst mal ausschließlich mit den AttributeNode-Methoden beschäftigen, da deren Handhabung das grundsätzliche Verständnis fördert. Wenn man das Prinzip bei den Attributknoten verstanden hat, dann hilft dieses Wissen auch bei anderen Problemen.

5. Ein HInweis

Alle oben beschriebenen Methoden sind im DOM4-Modell nicht mehr enthalten und gelten als deprecated. Allerdings ist es noch immer nicht sicher, ob es dabei bleiben soll. Darum führe ich sie weiterhin hier auf und verweise auf eine Alternative, denn an Stelle von obigen Varianten gibt es auch noch eine elegante Kurzform.

<div id="rahmen">bla blubb jodelblah</div>
alert(document.getElementById('rahmen').id);
document.getElementById('rahmen').class = 'blubb';

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt