Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / hyperlinks,body et alter mit DOM


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.

Hyperlinks

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.

vorhergehendes Kapitel