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