Stil mit {stil}

Sep 2008

Javascript DOM (Document Object Model) Modell eines HTML-Dokuments

Das DOM ist der Standard für den Zugriff das gesamte HTML-Dokument. Eine Baumstruktur setzt die Elemente eines HTML-Dokuments in Beziehung zueinander, so dass ein Script von einem Element aus durch die Seite navigieren und HTML-Tags einfügen oder entfernen kann.

Das HTML-Element ist der Vaterknoten des HEAD- und des BODY-Elements. Das HEAD-Element wiederum hat zwei Kinder: das TITLE- und das META-Element.

TITLE- und META-Element sind Nachfahren desselben Eltern-Elements – siblings in der Sprache des DOM.

Aufgaben des Javascript DOM für HTML-Seiten

Die Methoden und Eigenschaften des DOM erzeugen neue Tags, manipulieren die Attribute, hängen Elemente mitsamt allen verschachtelten Elementen an eine andere Stelle des Dokuments und steuern den Fluss der Ereignisse, wenn das Dokument bereits im Fenster des Benutzers geladen ist und ersparen so das aufwändige Neuladen des Dokuments.

CSS-Eigenschaften von HTML-Tags ändern

<p id="toc">CSS-Eigenschaften von HTML-Tags ändern  </p>

<button id="button">Schriftart ändern</button>
	
<script type="text/javascript">
document.getElementById('button').onclick = function () {
   var elem = document.getElementById('toc');
   var button = document.getElementById('button');

   if (elem.style.fontFamily == "Verdana") {
      elem.style.fontFamily = "Georgia";
      button.innerHTML = "Schriftart zurücksetzen";
   } else {
      elem.style.fontFamily = "Verdana";
      button.innerHTML = "Schriftart ändern";
   }
}
</script>

Das Skript identifiziert das button-Element anhand seines id-Attributs und fängt ein onclick-Ereignis auf dem Element ab. Beim Klick auf den Button prüft das Skript, ob das Elememt mit id="toc" die CSS-Eigenschaft font-family = "Verdana" aufweist. Falls nicht, wird dieser Stil gesetzt, falls ja, wird die Schrift zu "Georgia" geändert.

Button mit Javascript erzeugen

Damit der Button »Schriftart ändern« nicht erscheint, wenn Javascript im Browser deaktiviert ist, kann der Button on the fly erzeugt werden.

Im HTML-Dokument steht jetzt nur noch das p-Element mit der dem id-Attribut "toc".

<p id="toc">Beliebt ist die Manipulation der style-Eigenschaft von HTML-Elementen. </p>

var toc = document.getElementById('toc'); 
var button = document.createElement('button'); 
button.setAttribute('id', 'button');
var buttontext = document.createTextNode('Schriftart ändern');
button.appendChild(buttontext);
if (toc.nextSibling) {
   var nextNode = toc.nextSibling;
   toc.parentNode.insertBefore(button, nextNode);
} else {
   toc.parentNode.append(button);
}

document.createElement('button') erzeugt einen neuen Knoten vom Typ »button« und gibt dem neuen Knoten ein id-Attribut mit dem Wert »button«. document.createTextNode('Schriftart ändern') erzeugt ebenfalls einen neuen Knoten – jetzt aber keinen Elementknoten, sondern einen Textknoten.

button.appendChild(buttontext) hängt den Textknoten an den Elementknoten.

Das neu erzeugte Button-Element erscheint allerdings noch nicht im Dokument, sondern schwebt sozusagen frei im Raum.

Eine Methode, die das neue Element hinter das Element mit id="toc" hängt, gibt es nicht, sondern eine Methode, die ein Element an den übergeordneten Vaterknoten vor einem vorhandenen Element einklinkt: toc.parentNode.insertBefore(button, nextNode).

Natürlich müsste das Skript prüfen, ob überhaupt ein Knoten hinter dem P-Element mit id="toc" existiert. Wenn dies nicht der Fall ist, kann der neue Knoten direkt an den Vaterknoten des P-Elements angehangen werden: toc.parentNode.appendChild(button).

Diese Zeilen würden direkt vor document.getElementById('button').onclick = function () … liegen und das erst Script könnte jetzt ohne Änderungen direkt nach diesem Vorspann aufgerufen werden.

<script type="text/javascript">
var toc = document.getElementById('toc'); 
var button = document.createElement('button'); 
button.setAttribute('id', 'button');
var buttontext = document.createTextNode('Schriftart ändern');
button.appendChild(buttontext);
if (toc.nextSibling) {
   var nextNode = toc.nextSibling;
   toc.parentNode.insertBefore(button, nextNode);
} else {
   toc.parentNode.append(button);
}

document.getElementById('button').onclick = function () {
   var elem = document.getElementById('toc');
   if (elem.style.fontFamily != "Georgia, serif") {
      elem.style.fontFamily = "Georgia, serif";
      elem.style.color = "darkred";
      document.getElementById('button').innerHTML = "Schriftart zurücksetzen";
   } else {
      elem.style.fontFamily = "Verdana, sans-serif";
      elem.style.color = "rgb(80,80,80)";
      document.getElementById('button').innerHTML = "Schriftart ändern";
   }
}
</script>