HTML-Objekte

Jetzt kommt der letzte große Schritt, damit JS langsam richtig interessant wird. Nämlich wie Elemente in einem HTML-Dokument angesprochen und verändert werden können. Hinweis: JavaScript ist viel komplizierter als ich es hier darstelle, denn eigentlich ist JS objektorientierter DOM-Mist mit vielen Merkwürdigkeiten (auch für Profis oft pervers oder auch perfide).

Ich möchte Ihnen hier nur eine einzige der vielen Methoden zeigen, um auf HTML-Objekte zuzugreifen: Über die ID.

Schritt 1: ID zuweisen

<div id="Txt">Hier eine Box mit besonderem Text.</div>
Ich erinner nochmals daran, der Name einer ID-Bezeichnung darf nur einmal in einem HTML-Dokument vorkommen.

Schritt 2: Per Javascript ansprechen

In dem Objekt "document" können Sie alle Elemente von Ihrem HTML-Dokument finden. Gott sei Dank hat unser Element ja eine ID, und nach der Fragen wir wie folgt.

document.getElementById("Txt")
Sie sehen schon, es wird von einem zum anderen immer ein Punkt verwendet. Jedes Element hat weitere Eigenschaften, welche gezielt angesprochen werden können. Auch wieder mit einem Punkt verbinden, z.B. das CSS "style" der Hintergrundfarbe "backgroundColor".

document.getElementById("Txt").style.backgroundColor = "red";
Aber Achtung. JavaScript gibt einen Fehler aus, bzw. macht einfach nichts, wenn der Code oben im Kopf steht. Denn während der Kopf schon übertragen wurde, und das JavaScipt schon loslegen will, ist der HTML-Körper aber noch unterwegs. Ergo findet er unser Element nicht. Schreiben Sie den Code in den Körper hinter dem <div>, oder machen einfach mit dem Interaktionsbeispiel weiter.

Interaktionsbeispiel

Ist ja langweilig, da hätte man auch ein mit CSS den Hintergrund ändern können. Also machen wir eine Funktion aus dem JS.

function faerbeHintergrund(Element,mitFarbe) {
   document.getElementById(Element).style.backgroundColor = mitFarbe;
}

Wenn wir diese Funktion aufrufen, müssen wir ihr folgende zwei Werte geben. "Element" ist der ID-Name und "mitFarbe" ist die Farbe die verwendet werden soll. Übrigens, die Funktion können Sie ruhig wieder in den Kopf (oder externe Datei) schreiben.

Jetzt brauchen wir noch einen Event-Handler an unserem <div>.

<div id="Txt" onclick="faerbeHintergrund('Txt','red');">
   Hier mein Text in der DIV-Box.
</div>

Wenn Sie nun die Seite laden, sehen Sie erstmal nichts. Klicken Sie allerdings auf den Text "onclick", wird unsere Funktion "faerbeHintergrund" ausgeführt. Schon können Sie gelesene Absätze markieren.

Kleiner Test

  • Erstellen Sie drei Texte "Mach Blau", "Mach Grün" und "Textfarbe zeigen".
     
  • Wenn Sie auf "Mach Blau" klicken, soll "Textfarbe zeigen" blau werden.
     
  • Wenn Sie mit der Maus über "Mach Grün" schweben, soll "Textfarbe zeigen" grün werden.
     
  • Wenn Sie auf "Textfarbe zeigen" klicken, soll selbiger schwarz werden.