Unterschied im Layer-Modell von Netscape 4 zu 6

[Christian Seiler]

Hallo Björn,

Ich weiß, dass beim Übergang von 4.X zu 6.X das Layer-Modell verworfen wurde und das DOM-Modell eingebaut. Kann mir jemand mal bezogen auf die Elemente <DIV> und <SPAN> erklären, wo genau der Unterschied liegt.

Unter Netscape 4 definierst Du einen Layer so:

<div id="layername" style="position: absolute; ...">
Inhalt
</div>

Du kannst dann per JavaScript auf die einzelnen Layer zugreifen:

document.layers['layername'].irgendwas

Jeder Layer ist sozusagen ein eigenes Dokument, d.h. Du kannst z.B. per

document.layers['layername'].document.open();
document.layers['layername'].document.write('wasweißich');
document.layers['layername'].document.close();

den Inhalt ersetzen. Auf verschachtelte Layer greifst Du über

document.layers['ebene1'].document.layers['ebene2']....

Das DOM-Modell dagegen sieht die dynamische Modifikation jeglichen HTML-Inhalts vor. Du kannst praktisch beliebig "Knoten" hinzufügen, ändern und löschen. Du kannst einem beliebigen Element auf einer Seite eine ID geben, z.B. so

<div id="alpha"></div>

aber auch alle anderen Elemente als <div> sind möglich:

<p>Hallo, dies ist ein <b id="test">Test</b>.</p>

Du kannst jetzt auf das o.g. div über

document.getElementById("alpha")....

zugreifen, auf das b über

document.getElementById("test")

Jeder Knoten besitzt diverse Eigenschaften. Microsoft hat eine Eigenschaft innerHTML eingeführt, die einfaches Ersetzen vom kompletten HTML-Inhalt erlaubt. Diese wird inzwischen vom IE, Mozilla, Konqueror und Opera ab Version 7 unterstützt und wird vom W3C mehr oder weniger toleriert.

Du kannst also den Inhalt des divs durch

inhalt = document.getElementById("alpha").innerHTML;

auslesen und per

document.getElementById("alpha").innerHTML = 'Halli <i>Hallo</i>';

ändern. Gleiches gilt auch für das b-Element weiter oben, Du kannst den Inhalt praktisch dynamsich ersetzen.

Die verschiedenen Stileigenschaften der Objekte kannst Du über das style-Unterobjekt verändern, z.B.

document.getElementById("test").style.backgroundColor = 'red';

Grüße,

Christian

Näheres in SELFHTML unter: http://selfhtml.teamone.de/dhtml/modelle/dom.htm