5.4 Anwendungsbeispiele

Nun wissen wir, wie DOM-Bäume funktionieren und inwieweit diese mit der Programmierung zusammenhängen. Wir haben Methoden und Eigenschaften kennengelernt, mit denen wir arbeiten können. Wie wir damit arbeiten, erfahren wir in diesem Kapitel.

Hinweis

Wir verwenden in den kommenden Beispielen CSS und JavaScript, auch wenn dies erst später behandelt wird. Die Beispiele sollen die Funktionsweise von DOM aufzeigen, und wir hoffen, dass auch ohne das Wissen um CSS und JavaScript die Grundprinzipien verstanden werden.

CSS-Eigenschaften von HTML-Tags ändern

DOM-Methoden und -Eigenschaften steuern Ereignisse oder manipulieren eine Stelle des Dokumentes. Dadurch muss das Dokument, wenn es bereits geöffnet wurde, nicht neu geladen werden.

Mit einem einfachen Skript können wir auch die CSS-Eigenschaften von HTML-Elementen verändern. Dazu erstellen wir zunächst ein HTML-Dokument, das das Element enthält, das verändert werden soll. Des Weiteren enthält es noch einen Button, der das Ereignis der Änderung auslösen soll.

Beispiel: Änderung von CSS-Eigenschaften (HTML-Dokument)

Hier der komplette HTML-Code, der das Beispiel zeigt:

<!doctype html> 
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>CSS-Eigenschaften von HTML-Tags ändern</title>
</head>

<body>
  <h1>CSS-Eigenschaften von HTML-Tags ändern</h1>
  <p id="change" style="font-family: serif;">
      Hinter eines Baumes Rinde<br>
      wohnt die Made mit dem Kinde.<br>
      Sie ist Witwe, denn der Gatte,<br>
      den sie hatte, fiel vom Blatte.<br>
      Diente so auf diese Weise<br>
      einer Ameise als Speise.<br>
  </p>
  <div>
    <input type="button" id="button" value="Schriftart ändern" onclick="cssChange();" />
  </div>

 <!-- Hier beginnt JavaScript -->
  <script>
    function cssChange(){
      var change = document.getElementById('change');
      var button = document.getElementById('button');
      if(change.style.fontFamily == "serif"){
         change.style.fontFamily = "sans-serif";
         button.value = "Schriftart zurücksetzen";
      }else{
         change.style.fontFamily = "serif";
         button.value = "Schriftart ändern";
      }
    }
  </script> 
</body>
</html>

Funktionsweise

  • Zeile 19: Im <input>-Element gibt es eine JavaScript-Methode onclick, die beim Klick auf den Button die JavaScript-Funktion cssChange aufruft.

  • In der JavaScript-Funktion cssChange:

  • Die Variable var change sucht im DOM-Baum des HTML-Dokuments das Element mit der id="change" und speichert es.

  • Ebenso wird die Variable var button dem <input>-Element aus Zeilen 19 + 20 zugewiesen.

  • Beide Variablen enthalten die entsprechenden DOM-Elemente und können HTML-Attribute auslesen. Dies wird in der if-Bedingung verwendet:

  • change.style.fontFamily verweist auf die CSS-Eigenschaft font-family des <p>-Elements. Beim ersten Aufruf ist dies serif.

  • Wenn die Bedingung erfüllt ist, wird change.style.fontFamily der Wert sans-serif zugewiesen.

    • Dieser Wert wird direkt über DOM an das <p>-Element übergeben.
  • In der Zeile button.value wird der Text des Buttons dynamisch geändert.

Übungsaufgabe

Wenn das oben angeführte Beispiel für uns neu oder noch etwas ungewohnt ist, dann probieren wir die folgende Aufgabe: Nehmen wir den Sourcecode und wandeln wir diesen so ab, dass die Überschrift geändert wird.

Eine Liste erstellen und erweitern

Das folgende Beispiel zeigt, wie Elemente zur aktuellen Seite hinzugefügt werden können. Dafür haben wir zunächst ein normales HTML-Dokument, in dem eine Liste vorkommt. Wie wir sehen, hat diese Liste bisher nur ein Element.

Beispiel: HTML-Body mit nur einem Listeneintrag

<!doctype html>                                                         
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Liste erstellen und erweitern</title>
</head>

<body>
  <h1>Liste mit DOM + JavaScript erweitern</h1>
  <p>Im folgenden sind Social Networks aufgelistet.</p>
  <ul id="list1">
    <li><a href="https://de-de.facebook.com/">Facebook</a></li>
  </ul>

 <!-- Hier beginnt JavaScript -->  
  <script>
    var data = [
      {"text": "XING", "url": "https://www.xing.com/"},
      {"text": "Linkedin", "url": "https://www.linkedin.com/"},
      {"text": "Researchgate", "url": "https://www.researchgate.net"} 
    ];
    window.onload = function(){
      var list = document.getElementById("list1");
      for(var i = 0; i < data.length; i++){
        var link = data[i];
        var li = document.createElement("li"); // erzeugt li-Element
        var a = document.createElement("a"); // erzeugt a-Element
        a.setAttribute("href", link.url); // Attribute werden gesetzt
        var linktext = document.createTextNode(link.text); 
        // Nun die Elemente aneinanderhängen
        a.appendChild(linktext);
        li.appendChild(a);
        list.appendChild(li);
      }
    }
  </script>
</body>
</html>

Funktionsweise

  • In der Funktion window.onload wird die leere Liste ausgelesen und die Daten mit createElement erstellt.

  • Anschließend werden die neuen Elemente mit appendChild immer aneinander gehängt (a wird an li gehängt und li an die Liste).

  • Die fertige Liste sieht dann so aus:

    • Facebook

    • XING

    • Linkedin

    • Researchgate

Wichtiger Hinweis

Natürlich macht es wenig Sinn, die zusätzlichen Links fest in einem JavaScript-Array zu definieren. Später lernen wir, wie man mittels JavaScript (und Ajax) die Daten von einem Webserver dynamisch einfügen kann, ohne dass die Webseite neu geladen werden muss.