Attribute & Javascript

Attribute einer Webseite lesen & ändern

Attribute sind Knoten (nodes) nach dem DOM-Modell.
+ Sie unterscheiden sich von anderen Knoten, indem sie keine childNodes haben können.
+ Jeder Knoten kann beliebig viele Attribute haben, jedes Attribut gehört zu genau einem Knoten.
+ Attribute haben die allgemeine Form name="wert" 		Die vorgestellten Methoden können Live ausprobiert werden.
► Das Ergebnis wird auf dieser Webseite dargestellt.
► Zusätzlich werden die Attribute der Testknoten nach Ausführung jeder Funktion neu analysiert und das Ergebnis im Quelltext angezeigt.
Derzeitige Browser (vor allem M$IE) reagieren leider nicht immer so wie erwartet, teilweise sogar unterschiedlich je nach Attribut.
Überprüfen sie selbst, ob und wie verschiedene Browser & Versionen mit den vorgestellten Beispielen umgehen.
Javascript & DOM Zugriff auf alle Elemente einer Webseite mit ECMAscript
Voraussetzung für alle Beispiele dieser Seite:
Sie können nur die Attribute eines identifizierten Knotens bearbeiten !
Anzahl & Liste Bei der Anzahl der Attribute gibt es Missverständnisse
Lesen Wert eines Attributs lesen
Schreiben / Ändern Wert eines Attributs ändern
Neu Ein neues Attribut anlegen
Löschen Ein Attribut entfernen
Sonderfälle:
style
 style-Attribute und das style-Objekt
events
 event-Attribute (onclick, onmouseover, ..)

Anzahl der Attribute eines DOM-Knotens
Man sollte meinen, dass es über die Anzahl der Attribute keinen Zweifel geben kann ...

Eigenschaft   attributes.length

Der Knoten "t1" (Mustertext-Beispiel rechts) sollte 3 Attribute zeigen:
(0) id="t1"
(1) align="center"
(2) class="b"
Das wird von allen modernen Browsern auch angezeigt.
M$-Browser zeigen dagegen die Anzahl aller Attribute, welche für diesen Knoten möglich sind. Das ist sinnlos und besonders unangenehm, weil M$IE die Standardfunktionen für Attribute nicht korrekt beherrscht (siehe unten).
Live--Test von attributes.length
n = document.getElementById("t1");
na = n.attributes.length;
alert("Anzahl Attribute = "+na);

<div id="t1" align="center" class="b">
Mustertext
</div>

Schleife über alle Attribute

So können sie die Liste aller Attribute eines DOM-Knotens ausgeben:
In einer Schleife wird jedes Attribut als DOM-Knoten isoliert und analysiert.
An der bezeichneten Stelle können sie einen Filter einschalten:
Leere Attribute ( av=null ) oder leere Strings (at="string" && av.length=0) werden nicht angezeigt.

Live--Ausgabe der Attribut-Liste von Testknoten id="t1"
Optionen:   alle   nur sinnvolle   [Typ]
s = "Attribute:\n";
n = document.getElementById("t1");
na = n.attributes.length;
for(i=0;i<na;i++) {
att = n.attributes[i];
an = att.nodeName;
av = att.nodeValue;
at = typeof av; 		// Name
// Wert
// Typ
// Filter hier einfügen
s+=an+"="+av;
}
alert(s);

Lesen von Attribut-Daten
Die Standard-Methode getAttribute() liest den Wert eines DOM-Knoten-Attributs. Der Attribut-Name wird als String (Zeichenkette) übergeben.
Leider arbeiten M$-Browser nicht korrekt. Attribute werden ohne Fehlermeldung unterschiedlich behandelt, was noch schlimmer ist als gar nicht.

Live--Test dieser Methode.
n = document.getElementById("t2");
ava = n.getAttribute("align");
avc = n.getAttribute("class");
alert("align="+ava+"\nclass="+avc);

<div id="t2" align="center" class="b">
Mustertext
</div>

Alternative Methode:   Schleife

In einer Schleife werden alle (Anzahl s.o.) Attribute des DOM-Knotens durchlaufen. Jedes Attribut wird als eigener Knoten att isoliert und mit nodeName und nodeValue analysiert.
So finden sogar ältere M$IE-Browser alle Attribute.

Vergleichen sie das Ergebnis ihres Browsers bei Anwendung der Standardmethode und dieser mühsamen Methode:
Live--Test dieser Methode

Tipp: Nach einem Treffer können sie die for-Schleife mit break abbrechen.
n = document.getElementById("t2");
na = n.attributes.length;
for(i=0;i<na;i++) {
att = n.attributes[i];
an = att.nodeName;
av = att.nodeValue;
if(an=="align") {ava=att.nodeValue;}
if(an=="class") {avc=att.nodeValue;}
}
alert("align="+ava+"\nclass="+avc);

Alternative Methode:

Alle gängigen Browser und neuere (!) M$IE-Versionen beherrschen die Methode getAttributeNode
Sie liefert das Attribut als node-Objekt, dessen nodeValue ist der gesuchte Wert.
Live--Test dieser Methode
n = document.getElementById("t2");
att = node.getAttributeNode("align");
ava = att.nodeValue;
att = node.getAttributeNode("class");
avc = att.nodeValue;
alert("align="+ava+"\nclass="+avc);

Ändern (Schreiben) von Attribut-Daten
Die Standard-Methode setAttribute() schreibt den Wert eines DOM-Knoten-Attributs. Attribut-Name und Attribut-Wert werden als Strings (Zeichenketten) übergeben.
Klicken sie jede der Live-Tasten mehrmals:

Live--Test von setAttribute("align","right")
Live--Test von setAttribute("class","test1")

Leider verhalten sich M$IE-Browser besonders unangenehm: Viele Attribut-Werte (z.B. class) werden zwar fehlerfrei gesetzt und lassen sich wieder auslesen, sie werden jedoch ignoriert, d.h. ohne Fehlermeldung nicht ausgeführt.
n = document.getElementById("t3");
n.setAttribute("align","right");
n.setAttribute("class","test1");

<div id="t3" align="center" class="b">
Mustertext
</div>

Anfangswerte wiederherstellen
Alternative Methode (für M$IE-Browser, sehr zeitraubend):
In einer Schleife werden alle Attribute des DOM-Knotens durchlaufen. Bei zutreffendem Attribut-Namen wird der Wert geschrieben.
So können sogar ältere M$IE-Browser alle Attribute schreiben.
► Vorsicht - Moderne Browser können einen nodeValue nur dann verändern, wenn das entsprechende Attribut bereits existiert !

Vergleichen sie das Ergebnis ihres Browsers bei Anwendung der Standardmethode und dieser mühsamen Methode !
Live--Test (align) von nodeValue="right"
Live--Test (class) von nodeValue="test1"
Anfangs--Werte wiederherstellen
n = document.getElementById("t3");
na = n.attributes.length;
for(i=0;i<na;i++) {
att = n.attributes[i];
an = att.nodeName;
if(an=="align") {att.nodeValue="right";}
if(an=="class") {att.nodeValue="test1";}
}

Alternative Methode:

Alle gängigen Browser und die neueren (!) M$IE-Versionen beherrschen die Methode setAttributeNode
Man erzeugt einen Attribut-Knoten, weist ihm einen Wert zu, und hängt ihn an den Element-Knoten an.

Live--Test (align) von nodeValue="right"
Live--Test (class) von nodeValue="test1"
Anfangs--Werte wiederherstellen
n = document.getElementById("t3");
att = document.createAttribute("align");
att.nodeValue = "right";
n.setAttributeNode(att);
att = document.createAttribute("class");
att.nodeValue = "test1";
n.setAttributeNode(att);
Event-Attribute
Viele mit "on" beginnende Attribute (z.B. onclick, onmouseover, ..) steuern die Verarbeitung von Ereignissen (events). 		Event-Attribute verhalten sich (insbesondere mit M$IE Browser) oft anders.
♦ Details im Absatz Event-Attribute auf dieser Seite.

Neue Attribut-Knoten anlegen
Die Standard-Methode createAttribute() erzeugt einen neuen Attribut-Knoten. Weisen sie ihm einen Wert nodeValue zu und hängen sie ihn mit setAttributeNode an einen vorhandenen DOM-Knoten.

Live--Test von createAttribute("align") mit nodeValue="center"
Live--Test von createAttribute("class") mit nodeValue="test1"
Anfangs--Werte wiederherstellen.

Diese Methode erzeugt ein neues Attribut dieses Namens, oder ersetzt ein vorhandenes gleichnamiges Attribut.
Das funktioniert meist auch bei M$-Browsern.
n = document.getElementById("t4");
// neues Attribut "align"
att = document.createAttribute("align");
att.nodeValue = "center";
n.setAttributeNode(att);
// neues Attribut "class"
att = document.createAttribute("class");
att.nodeValue = "test1";
n.setAttributeNode(att);

<div id="t4">
Mustertext
</div>
Event-Attribute
Viele Attribute (z.B. onclick, onmouseover, ..) steuern die Verarbeitung von Ereignissen (events). 		Event-Attribute verhalten sich (insbesondere mit M$IE Browser) oft anders.
♦ Details im Absatz Event-Attribute auf dieser Seite.

Attribut-Knoten löschen

Attribut-Wert löschen:

Methode removeAttribute() löscht den Wert eines Attributs:
Live--Test von removeAttribute("align")
Live--Test von removeAttribute("class")
Anfangs--Werte wiederherstellen.

M$-Browser ignorieren leider das wichtige Attribut "class".
n = document.getElementById("t5");
n.removeAttribute("align");
n.removeAttribute("class");

<div id="t5" align="center" class="b">
Mustertext
</div>

Attribut löschen

Methode removeAttributeNode() entfernt den ganzen Attribut-Knoten.
Live--Test von removeAttributeNode für "align"
Live--Test von removeAttributeNode für "class"
Anfangs--Werte wiederherstellen.

Auch diese Methode funktioniert mit M$-Browsern teilweise fehlerhaft.
Es bleibt noch der Weg, den Attributknoten in einer Schleife zu isolieren und nodeValue="" (Lösch-Wert je nach Typ !) zu setzen:
Live--Test von nodeValue="" für "align"
Live--Test von nodValue="" für "class"

Beide Methoden werden im Beispiel rechts gezeigt.
Die Methode nodeValue="" funktioniert sogar mit M$-Browsern.
n = document.getElementById("t5");
na = n.attributes.length;
for(i=0;i<na;i++) {
att = n.attributes[i];
an = att.nodeName;
if(an=="align") {
att.nodeValue="";
n.removeAttributeNode(att);
}
if(an=="class") {
att.nodeValue="";
n.removeAttributeNode(att);
}
}

Das Attribut "style" und das style-Objekt
Das Attribut style hat eine Sonderstellung. Als Attribut hat es nur einen Wert vom Typ string,  jedoch keine childNodes
Der Wert kann ein recht komplexer Text sein, dessen Verarbeitung aufwändig ist. Trotzdem wird diese Methode von modernen Browsern wie z.B. Firefox unterstützt. 		Andererseits ist style ein eigenes Objekt mit zahlreichen Eigenschaften. In dieser Form ist es wesentlich einfacher, einzelne style-Eigenschaften zu lesen oder zu schreiben.
Details zum style-Objekt auf einer eigenen Webseite.
Das Attribut style wird nach HTML-Syntax so wie jedes andere Attribut behandelt.
Live--lesen nodeValue ?
Live--schreiben : nodeValue="color:#00FF00;"
Live--neu anlegen

Leider funktioniert das bei M$IE nicht. Da die Methode außerdem umständlich ist, verwenden sie besser das style-Objekt (s.u.)
<div id="t6" style="color:#FF0000; font-weight:bold; text-align:center;">
Mustertext
</div>

Das style-Objekt:

Nach DOM-Syntax existiert für jeden DOM-Knoten ein Unter-Objekt style

Dieses Objekt enthält zahlreiche Eigenschaften, die es erlauben, jede CSS-Eigenschaft einzeln anzusprechen.
Die Namen der Eigenschaften sind aus der CSS-Syntax abgeleitet.

♦ Details dazu im Kapitel style-Objekt.
Lesen von CSS-Eigenschaften:
n = document.getElementById("t6");
c = n.style.color;

Schreiben von Eigenschaften:
n.style.color = "blue";

Event-Attribute
Events sind Ereignisse, auf die man optional mit eigenen (Javascript)-Programmen reagieren kann.
Für die Programmierung interessant sind vor allem jene Ereignisse, die bei der interaktiven Bedienung auftreten, z.B. onclick, onchange, onmouseover, ... 		Leider wurde mit dieser Möglichkeit viel Missbrauch getrieben. Die programmierte Erzeugung und/oder Änderung dieser Attribute wird daher von einigen Browsern / Versionen eingeschränkt. Eine Alternative ist die Erzeugung von <a>-Elementen (Hyperlinks), deren href-Attribut man mit Javascript ändern kann.

Event-Attribute im Quelltext

Das Beispiel rechts zeigt einen DOM-Knoten mit einem onclick-Attribut. Wenn das Attribut bereits im ursprünglichen HTML Quelltext vorhanden ist, dann funktioniert es mit allen gängigen Browsern.
Klicken sie zum Test auf den Inhalt des Knotens (rot).

Tipp: Ein Event-Attribut verändert den Mauszeiger nicht wie z.B. ein Link. Dazu müssen sie zusätzlich den CSS-Style cursor:pointer ändern. 		Muster für eine event-handler Funktion:
function eh1() {
alert("Hier ist eh1");
}
HTML mit vorgegebenem onclick-Attribut:
Muster für ein
<span id="t7" onclick="eh1()">
onclick-Attribut
</span>

Lesen von Event Attributen

Live--lesen
Das Ergebnis ist je nach Browser, Version und Methode entweder ein String oder eine Funktion. Hier wird Live sowohl die Standard-Methode getAttribute verwendet als auch die M$-Eigenschaft onclick (non-Standard). 		Lesen des (vorgegebenen) onclick-Attributs:
n = document.getElementById("t7");
aev = n.getAttribute("onclick");
aev = n.onclick; // M$IE
aet = typeof aev;

Schreiben von Event-Attributen

Testen sie Live ihren Browser mit dem rechts gezeigten Test-Knoten. Anfangs ist kein onclick-Attribut enthalten.
• Wählen sie Methode und Argument-Type und klicken sie Ausführen.
• Testen sie danach die Funktion durch Klick auf den Inhalt des Test-Knotens (rot)
• Lesen oder löschen sie das onclick-Attribut:
Live--lesen
Live--löschen

Nach jeder Ausführung wird der event-handler auf eine andere Funktion (eh1, eh2, eh3) umgeschaltet, damit sie eine Änderung verfolgen können. 		HTML Test-Knoten:
<div id="t8"> Event-Test</div>

Standard-Methoden für Attribute:
MethodeArgument
setAttribute Funktion
setAttributeNode String
onclick  
Ausführen von
n = document.getElementById("t8");
n.setAttribute("onclick",eh1);
Alternative:   event handler
Sicherer sind die DOM-Befehle für event handler.
Sie sind der event-Steuerung durch Attribute daher vorzuziehen !

♦ Details zu Ereignissen (events) und event handlern 		Definition eines event handlers:
n = document.getElementById("t8");
n.addEventListener("click",eh1,true);

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript   >   JS & DOM