Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Sep 2008
Javascript DOM – Attribute von Knoten ändern
Das Element-Objekt ist der gebräuchlichste Knotentyp im DOM-Baum und ist der programmtechnische Spiegel des HTML-/XML-Elements. Ein Elementknoten hat Attribute – entsprechend den Attributen des HTML-/XML-Tags – und diese Attribute werden in Javascript als Eigenschaften des Element-Objekts aufgefasst.
Ein Element ist auch ein Knotenobjekt und erbt Eigenschaften und Methoden vom Node-Objekt.
Die Javascript-Methoden des Elements sind Webdesigners Liebling, denn sie werden vorranging zur Änderung von CSS-Eigenschaften mit Javascript benutzt und bringen die effektvolle Dynamik ins DOM.
| getAttribute(attributeName) | setAttribute(attributeName, attributeValue) |
| removeAttribute(attributeName) | getAttributeNode(name) |
| setAttributeNode(newAttribute) | removeAttributeNode(oldAttribute) |
| getElementsByTagName(name) | getAttributeNS(namespaceURI, localName) |
| setAttributeNS(namespaceURI, qualifiedName, value) | removeAttributeNS(namespaceURI, localName) |
| getAttributeNodeNS(namespaceURI, localName) | hasAttribute(name) |
| hasAttributeNS(namespaceURI, localName) |
Die sichersten und meistgenutzen Javascript-Methoden sind setAttribute() und getAttribute() – mit der Einschränkung, dass IE 6 / IE 7 das style-Attribut nicht erkennen. Stattdessen muss die node.style-Eigenschaft benutzt werden.
getAttribute in IE 8 | Ab Version 8 funktionieren die Methoden setAttribute und getAttribute.
Bei den Methoden getAttribute(), setAttribute() und removeAttribute() setzt und entfernt Internet Explorer 6 die DOM-Eigenschaft anstelle des DOM-Stringwerts. element.removeAttribute('class') funktioniert nicht in Internet Explorer 6, stattdessen muss element.removeAttribute('className') aufgerufen werden.
element.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; height: 50px;"></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.
function getAttribute()
{
var att = document.getElementById('att1').getAttribute('style');
alert(att);
}
Internet Explorer 6 erkennt ausgerechnet das style-Attribut nicht und kann das style-Attribut weder mit getAttribute('style') lesen noch mit setAttribute('style') setzen. Die sicherste Technik bleibt also bei einer Berücksichtigung von IE 6 / IE7 die style-Eigenschaft des DOM HTML.
Beim class-Attribut erwartet IE 6 / IE 7 den String 'className' (Groß-Kleinschreibweise beachten!) anstelle des Attributnamens 'class'.
element.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.
function setAttribute()
{
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');
} else {
alert('Kann kein Element mit der ID attf2 finden');
}
}
Am Rande: IE 6 / IE 7 interpretiert den Aufruf elem.setAttribute('class', 'farbe') nicht, wohl aber elem.setAttribute('className', 'farbe'). Standardkonforme Browser interpretieren diesen Hack nicht. In IE 8 funktioniert elem.setAttribute('class', 'farbe') wie in allen anderen modernen Browsern.
element.removeAttribute(attributeName)
<div id="attf3" style="height: 50px;" 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');
}
}
IE 6 / IE 7 entfernt auch das style-Attribut, obwohl die Methoden setAttribute('style') und getAttribute('style') nicht unterstützt werden.
element.getAttributeNode(name)
erwartet den Namen eines Attributs als String gibt das Attribut-Objekt mit dem Namen name zurück.
Im Gegensatz zur Methode getAttribute() ist der Rückgabewert von getAttributeNode() ein Objekt und kein String. Als Objekt besitzt der Rückgabewert von getAttributeNode() Knotentyp, Knotennamen und -wert. Wenn das Attribut mit dem Namen name nicht gefunden wird, gibt die Methode null zurück.
<img id="attf4" style="border: 1px solid gray;" src="ei12.jpg"
width="49" height="64" alt="ei12.jpg" />
Das Skript liest die Attribut-Objekte height und style des IMG-Elements und gibt Knotentyp, Knotenname und den Wert des Knotens zurück.
function getAttributeNode()
{
if (document.getElementById('attf4')) {
var elem = document.getElementById('attf4');
var attrH = elem.getAttributeNode('height');
var attrS = elem.getAttributeNode('style');
alert('nodeType ' + attrH.nodeType + "\n" +
'nodeName ' + attrH.nodeName + "\n" +
'nodeValue ' + attrH.nodeValue + "\n" +
'nodeType ' + attrS.nodeType + "\n" +
'nodeName ' + attrS.nodeName + "\n" +
'nodeValue ' + attrS.nodeValue);
} else {
alert('Kann das Osterei nicht finden.');
}
}
IE 6 gibt zwar den Typ und den Namen des Attribut-Objekts style korrekt zurück, nicht aber den Wert.
element.setAttributeNode(newAttribute)
Es ist gar nicht so einfach, neben dem style-Attribut noch andere interessante Attribute zu finden ...
 |  |  |
 |  |  |
<table id="attf5">
<tr>
<td><img src="ei01.jpg" width="49" height="64" alt="ei12.jpg" /></td>
<td><img src="ei02.jpg" width="49" height="64" alt="ei12.jpg" /></td>
<td><img src="ei03.jpg" width="49" height="64" alt="ei12.jpg" /></td>
</tr>
…
</table>
Das Skript sucht den Elementknoten mit der id attf5 und sammelt dann alle img-Elemente unterhalb dieses Elternknotens – einfach gesagt, alle IMG-Elemente unterhalb des TABLE-Elements – in das Array items.
Der Block der for-Anweisung erzeugt für jedes Mitglied des Arrays items ein Attribut width und weist dem Attriubt den Wert '120' zu. Am Ende setzt items[i].setAttributeNode(width); den Attributknoten width jedes IMG-Elements auf den Wert von width und überschreibt damit den vorhandenen Wert.
function setAttributeNode()
{
if (document.getElementById('attf5')) {
var elem = document.getElementById('attf5');
var items = elem.getElementsByTagName('img');
for (var i=0; i<items.length; i++) {
var width = document.createAttribute('width');
width.nodeValue = '120';
items[i].setAttributeNode(width);
}
} else {
alert('Fehler: Element mit der ID attf5 nicht gefunden');
}
}
element.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.
- Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen.
- Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung
- und waren entsetzt
<ol id="attf6">
<li dir="rtl">Als es klingelte, nachts, es war kurz vor halb zehn,
wurde niemand erwartet und niemand gesehen.</li>
…
</ol>
Das Skript sucht nach dem Elementknoten mit der id attf6 und sammelt alle LI-Elemente unterhalb des Elementknotens in das Array items.
Im Block der for-Anweisung setzt items[i].getAttributeNode('dir') den Verweis dir auf den Attributknoten dir jedes LI-Elements und die letzte Anweisung, items[i].removeAttributeNode(dir);, entfernt den Attributknoten. Entsprechendes verfahren die folgenden Anweisungen mit dem Attributknoten style.
function removeAttributeNode()
{
if (document.getElementById('attf6')) {
var elem = document.getElementById('attf6');
var items = elem.getElementsByTagName('li');
for (var i=0; i<items.length; i++) {
var dir = items[i].getAttributeNode('dir');
items[i].removeAttributeNode(dir);
var style = items[i].getAttributeNode('style');
items[i].removeAttributeNode(style);
}
} else {
alert ('Fehler: Kann das Element mit der ID attf6 nicht finden');
}
}
IE 6 / IE 7 unterstützt die Methode removeAttributeNode() nicht. Erst IE 8 funktioniert ordnungsgemäß.
element.hasAttribute(name)
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'); }
}