| 
Auf Objekt und Eigenschaft
zugreifen
a) Zugriff mit dem alten
document object model
b) Zugriff mit dem neuen
document object model
Ändern der Hintergrundfarbe
a) Zugriff mit dem alten
document object model
b) Zugriff mit dem neuen
document object model
Hyperlinks
| Auf
Objekt und Eigenschaft zugreifen |
|
JavaScript ist historisch gewachsen.
Das bedeutet ganz konkret, dass es unterschiedliche Verfahren
gibt, auf die Elemente einer HTML Seite zuzugreifen, was eigentlich
etwas verwirrend ist. Damit kann man leben, solange es lediglich
für den Zugriff auf das Objekt unterschiedliche Methoden
gibt, das Objekt selbst aber immer noch die gleichen Eigenschaften
und Methoden hat. Beispiel:
Folgende zwei Schreibweisen greifen auf das selbe Objekt und
die selbe Eigenschaft zu.
a) document.forms[0].hallo.value="Karotte";
b) document.getElementsByName("banane").value="Karotte";
Machen wir uns das an einem Beispiel klar
| a)
Zugriff mit dem alten document object model |
|
Der Quelltext sieht so aus
<script language="JavaScript">
function dom_old_style()
{
document.forms[0].hallo.value="Alt, aber bewährt
!";
}
</script>
<form name="banane">
<input type=text name="hallo"><input type=button
value="click me" onClick=dom_old_style()>
</form>
| b)
Zugriff mit dem neuen document object model |
|
Der Quelltext sieht so aus
<script language="JavaScript">
function dom_new_style()
{
document.getElementsByTagName("form")[1].hallo.value="Yeah,
das ist das neue DOM !";
}
</script>
<form name="banane">
<input type=text name="hallo" size=40><input
type=button value="click me" onClick=dom_new_style()>
</form>
Wir sehen also, dass lediglich das Objekt
auf eine andere Art und Weise angesprochen wird, die Eigenschaften
und Methoden des Objektes aber nach wie vor zur Verfügung
stehen. Der letzte Ansatz ist im übrigen der allgemeinere,
da er auch für das Parsen von XML Dokumenten verwendet
werden kann.
Verwirrender sind jetzt schon die Fälle,
wo Eigenschaften auf einmal einem ganz anderen Objekt zugeordnet
werden, wobei aber beide Zuordnungen funktionnieren.
| Ändern
der Hintergrundfarbe |
|
Bei der, zugegebenermassen selten praktisch
relevanten Möglichkeit auf die Hintergrundfarbe zuzugreifen
gibt es dann wieder zwei Möglichkeiten, nun aber ist
der Unterschied größer.
a) document.bgcolor="red";
b) document.getElementsByTagName("body").bgcolor="red";
| a)
Zugriff mit dem alten document object model |
|
Um dynamisch die Hintergrundfarbe einer Seite
mit der alten Syntax auszutauschen, wählen wir diese
Schreibweise.
<html><head><title>bgcolor
austauschen </title></head>
<body>
<script language="javascript">
function dressing(a)
{
document.bgColor=a;
}
</script>
<form name="farbe">
<select name="auswahl" name=farbe onChange=dressing(document.farbe.auswahl[document.farbe.auswahl.selectedIndex].value)
>
<option value="red">rot<option value="green">grün<option
value="black">schwarz
</select>
</form>
</body>
</html>
Wir können uns betrachten, was dieses Programm
macht, nichts Aufregendes by the way, indem wir hier
clicken. Auch die Syntax ist uns bereits bekannt. bgcolor
ist eine Eigenschaft von Dokument, die wir einfach überschreiben.
| b)
Zugriff mit dem neuen document object model |
|
Um dynamisch die Hintergrundfarbe einer Seite
mit der neuen Syntax auszutauschen, wählen wir diese
Schreibweise.
<html><head><title>bgcolor
austauschen </title></head>
<body>
<script language="javascript">
function dressing(a)
{
document.getElementsByTagName("body")[0].bgColor=a;
}
</script>
<form name="farbe">
<select name="auswahl" name=farbe onChange=dressing(document.getElementsByTagName("form")
[0].auswahl[document.getElementsByTagName("form")[0].auswahl.selectedIndex].value)
>
<option value="red">rot<option value="green">grün<option
value="black">schwarz
</select>
</form>
</body>
</html>
Auch dieses Beispiel, das mit dem vorherigen
hinsichtlich der Wirkung völlig identisch ist, können
wir natürlich wieder betrachten indem wir hier
clicken. Was uns überrascht ist diese Zeile
document.getElementsByTagName("body")[0].bgColor=a;
bgcolor ist jetzt, was ja eigentlich korrekt ist, eine Eigenschaft
von body und nicht mehr von document. Prinzipiell hat der
neue Ansatz zwei Vorteile. Er ist erstens wesentlich radikaler
als der alte und zweitens lassen sich mit dem selben Ansatz
auch XML Dokumente parsen. Wesentlich radikaler ist er, weil
sich mit diesem Ansatz jedes x-beliebige Element einer HTML
Seite greifen und manipulieren lässt, wie dieses
Beipiel zeigt. Alles klar? In diesem Beispiel wird die
Hintergrundfarbe eines tables dynamisch, das heisst ohne dass
das Dokument nachgeladen wird, verändert. Das Beispiel
sieht so aus.
<html><head><title>bgcolor
austauschen </title></head>
<body>
<script language="javascript">
function dressing(a)
{
document.getElementsByTagName("table")[0].bgColor=a;
}
</script>
<form name="farbe">
<select name="auswahl" name=farbe onChange=dressing(document.getElementsByTagName("form")
[0].auswahl[document.getElementsByTagName("form")[0].auswahl.selectedIndex].value)
>
<option value="red">rot<option value="green">grün<option
value="black">schwarz
</select>
<table border=1>
<tr><td>
<div style="color:blue;font-family:Tahoma;font-size:16px;font-weight:bold">Hafes
(persischer Dichter)</div>
</td></tr>
<tr><td> <div style="color:cyan;font-family:Tahoma;font-size:16px;font-weight:bold">Das
Rätsel dieser Welt<br>
löst weder du noch ich<br>
diese geheime Schrift<br>
liest weder du noch ich<br>
wir wüssten beide gern<br>
was jener Schleieer birgt<br>
doch wenn der Schleier fällt<br>
bist weder du noch ich</div>
</td></tr>
</table>
</form>
</body>
</html>
Im Moment hat dieses Beispiel allerdings
den Schönheitsfehler, dass es nur in den Versionen ab
6.0 (Netscape und Explorer) funktionniert.
Wir zeigen zur Veranschaulichung nochmal
den Unterschied zwischen dem alten DOM Ansatz und dem neuen
anhand eines anderen Beispieles, anhand der Hyperlinks. Auch
auf die Hyperlinks kann man auf zwei unterschiedliche Methoden
zugreifen.
document.links;
document.getElementsByNameTag("A");
Betrachten wir einmal dieses
Beispiel. Nun ? Wenn wir auf "alle
Hyperlinks austauschen clicken" werden alle Hyperlinks
durch andere ersetzt. Vorher zeigt uns ein kleines alert()
Fenster noch wieviele Hyperlinks sich auf der Seite befinden.
Bedauerlich ist, dass dies nur mit dem Explorer funktionniert.
Das heisst, dass auf ein Attribut des a tags nur mit dem Internet
Explorer zugegriffen werden kann. Der Quelltext zu diesem
Programm sieht so aus.
<html><head><title>Auf
Hyperlinks zugreifen</title></head>
<script language=javascript>
var liste_links2=new Array("http://www.metallbau-kaethner.de","http://www.foto-kettenbach.de",
"http://www.optik-porcher.de","http://www.ruge-singer.de","http://www.tam-tam.de");
liste_links=document.links;
function linkliste()
{
alert(liste_links.length);
for(i=0;i<liste_links.length-2;i++)
{
liste_links[i].href=liste_links2[i];
}
}
</script>
<body>
<a href=http://www.bodyline-pur.de>http://www.bodyline-pur.de</a><br>
<a href=http://www.dbo-boettcher.de>http://www.dbo-boettcher.de</A><br>
<a href=http://www.hotel-falkensee.de>http://www.hotel-falkensee.de</A><br>
<a href=http://www.hofladen-falkensee.de>http://www.hofladen-falkensee.de</A><br>
<a href=http://www.bodytune-falkensee.de>http://www.bodytune-falkensee.de</A><br>
<center><A href=javascript:linkliste()>Alle Hyperlinks
austauschen</a></center>
<center><A href=javascript:location.reload()>Dokument
neu laden</a></center>
</body>
</html>
Entscheidend ist hierbei die Zeile liste_links=document.links,
mit der wir einen Array bilden, der alle links der Seite hält.
Mit dem neuen DOM Ansatz sieht das Beispiel so aus.
<html><head><title>Auf
Hyperlinks zugreifen</title></head>
<script language=javascript>
var liste_links2=new Array("http://www.metallbau-kaethner.de","http://www.foto-kettenbach.de"
,"http://www.optik-porcher.de","http://www.ruge-singer.de","http://www.tam-tam.de");
liste_links=document.getElementsByTagName("a");
function linkliste()
{
for(i=0;i<liste_links.length-2;i++)
{
document.getElementsByTagName("a")[i].href=liste_links2[i];
}
}
</script>
<body>
<a href=http://www.bodyline-pur.de>http://www.bodyline-pur.de</a><br>
<a href=http://www.dbo-boettcher.de>http://www.dbo-boettcher.de</a><br>
<a href=http://www.hotel-falkensee.de>http://www.hotel-falkensee.de</a><br>
<a href=http://www.hofladen-falkensee.de>http://www.hofladen-falkensee.de</a><br>
<a href=http://www.bodytune-falkensee.de>http://www.bodytune-falkensee.de</a><br>
<center><A href=javascript:linkliste()>Alle Hyperlinks
austauschen</a></center>
<center><A href=javascript:location.reload()>Dokument
neu laden</a></center>
</body>
</html>
Das Beispiel hat aber das gleiche Manko,
wie das vorige. Es funktionniert nur mit dem Explorer. Wer
es ausprobieren will, kann hier
clicken. Will man das obige Problem für
beide Browser lösen, muss man dem Hyperlink einen Namen
verpassen. Das ist zwar konträr zu der Logik beim Parsen
von XML Dokumenten (und der neue DOM Ansatz soll ja sowohl
mit HTML (genauer XHTML) Dokumenten umgehen können, aber
so ist das nun mal. (XML Dokumente sollte man ja immer auch
mit dem Namen des Elementes parsen können). Das obige
Beispiel cross Browser compatibel programmiert, sieht dann
so aus.
<html><head><title>Auf
Hyperlinks zugreifen</title></head>
<script language=javascript>
var liste_links2=new Array("http://www.metallbau-kaethner.de","http://www.foto-kettenbach.de",
"http://www.optik-porcher.de","http://www.ruge-singer.de","http://www.tam-tam.de");
liste_links=document.getElementsByName("Test");
function linkliste()
{
for(i=0;i<liste_links.length-2;i++)
{
alert(document.getElementsByName("Test")[i].href);
document.getElementsByName("Test")[i].href=liste_links2[i];
document.getElementsByName("Test")[i].firstChild.nodeValue=liste_links2[i];
}
}
</script>
<body>
<a name="Test" href="http://www.bodyline-pur.de">http://www.bodyline-pur.de</a><br>
<a name="Test" href="http://www.dbo-boettcher.de">http://www.dbo-boettcher.de</a><br>
<a name="Test" href="http://www.hotel-falkensee.de">http://www.hotel-falkensee.de</a><br>
<a name="Test" href="http://www.hofladen-falkensee.de">http://www.hofladen-falkensee.de</a><br>
<a name="Test" href="http://www.bodytune-falkensee.de">http://www.bodytune-falkensee.de</a><br>
<center><a name="Test" href="javascript:linkliste()">Alle
Hyperlinks austauschen</a></center>
<center><a name="Test" href=javascript:location.reload()>Dokument
neu laden</a></center>
</body>
</html>
Das kann man sich sowohl im Explorer
als auch in Netscape, jeweils ab Version 6 anschauen, indem
man hier
clickt. Hier fallen uns jetzt ein paar
Dinge auf. Erstens holen wir uns alle Hyperlinks der Seite
nicht mit getElementsByTagName() sondern mit getElementsByName().
Während der Explorer die allegemeine Syntax, also die
Syntax die auch für XML gilt offensichtlich bei allen
tags akzeptiert, tut Netscape das nicht. Netscape will bei
den tags, die einen Namen haben können, also form, images,
a, frame etc. getElementByName sehen und nicht getElementByTagName().
Der Name des Elementes ist in diesen Fällen eben der
Name und nicht der "eigentliche" Name des Elementes.
Dem Attribut, in diesem Falle href, kann man dann aber wieder
über die übliche Art und Weise einen Wert zuweisen.
Wundern können wir uns dann noch über diese Zeile.
document.getElementsByName("Test")[i].firstChild.nodeValue=liste_links2[i];
Bei dieser Zeile gibt es aber eigentlich nichts
zu wundern, denn sie entspricht der schon im Kapitel Mit
JavaScript XML Dokumente parsen vorgestellten Syntax.
Im Gegensatz zum Explorer, der den ausgetauschten Hyperlink
mit der Zeile oben nicht nur als Wert des href Attributes
deklariert sondern ihn auch für den User sichtbar austauscht,
weist Netscape mit dieser Zeile nur dem href Attribut einen
Wert zu, tauscht den Hyperlink aber nicht für den User
sichtbar ist. Netscape macht das in der für XML typischen
Schreibweise und den Explorer scheint das nicht zu stören.
Das erste Kind eine Hyperlinks ist ein Textknoten, also das
was zwischen <a href="http://www.xxxx.d>davon rede
ich</A> steht. Auf diesen Textknoten greifen wir mit
firstChild zu. den Wert dieses Knotens wollen wir ändern,
was wir dadurch tun, dass wir mit nodeValue eben einen neuen
Wert zuweisen.
|
