Table of Contents

DOM-Manipulationen

DOM steht für Document Object Model und erlaubt es, jedes Element auf einer HTML-Seite direkt anzusprechen, auszulesen und zu manipulieren. Es ist auch möglich neue Elemente einzufügen oder bestehende zu entfernen.

Damit eine Manipulation möglich ist, muss allerdings sichergestellt werden, dass die Seite vollständig geladen, bevor der eigene Code ausgeführt wird. Ansonsten existieren die gewünschten HTML noch gar nicht. Das ist z.B. gesichert, wenn der Benutzer erst die Ausführung vom Code anstösst, indem er z.B. auf einen Knopf drückt.

DOM-Manip nach User-Interaktion, globale Variablen

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>DOM-Manipulations in JavaScript</title>
                <script src="dom-manip.js"></script>
        </head>
        <body>
                <h1 id="seitentitel">Lahmer Titel</h1>
                <button onclick="losgehts()">Code starten!</button>
                <p>Der Code wurde <span id="counter">0</span> mal gestartet.</p>
        </body>
</html>
dom-manip.js
// Globale Variable :-(
counter = 0;
 
function losgehts() {
        counter+=1;
        document.getElementById("counter").innerHTML = counter;
        document.getElementById("seitentitel").innerHTML = "Viel besserer Titel!";
}

DOM-Manip ohne globale Variablen und nötiger User-Interaktion

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>DOM-Manipulations in JavaScript</title>
                <script src="dom-manip.js"></script>
        </head>
        <body>
                <h1 id="seitentitel">Lahmer Titel</h1>
                <button id="knopf">Code starten!</button>
                <p>Der Code wurde <span id="counter">0</span> mal gestartet.</p>
        </body>
</html>
dom-manip.js
// Funktion ausführen, wenn alles geladen ist
window.addEventListener('load', function(event) {
        // lokale Variable, verfügbar in inneren Funktionen
        let counter = 0;
 
        // Damit sich der Code ein bisschen einfacher liest
        let counterSpan = document.getElementById("counter");
        let seitenTitel = document.getElementById("seitentitel");
        let knopf = document.getElementById("knopf");
 
        setTimeout(function() {
                seitenTitel.innerHTML = "Viel besserer Titel!";
        }, 1000); // Nach einer Sekunde den Titel ändern
 
        // onlick-Event auf dem Knopf registrieren
        knopf.addEventListener('click', function(event) {
                if (counter==0) {
                        console.log("Funktionsaufruf im Kontext von:");
                        console.log(this);
                        console.log("Folgender Event:");
                        console.log(event);
                } 
                if (counter<3) {
                        counter++;
                        counterSpan.innerHTML = counter;
                } else {
                        seitenTitel.innerHTML = "Jetzt reichts aber!";
                        knopf.disabled = true;
                }
        });
 
});

Aufgaben

Ziel ist es, alle Umrechnungstools auf einer Seite platzieren zu können. Dazu soll Ihre Seite folgenden Konventionen genügen:

Programmieren Sie eine Webseite, die eine Um- oder Berechnung anbietet. Z.B.