Das DOM Object

DOM ist die Abkürzung für das Document Object Modell. Das DOM stellt ein Modell für den Zugriff auf die Elemente eines Dokuments dar z.B. ein HTML Dokument. Das DOM ist wie ein Verzeichnisbaum aufgebaut. Um einzelne Tags einer Webseite verändern zu können, benötigt JavaScript eine gesonderte Bibliothek, das Document Object Model (DOM). Diese Bibliothek steht in jedem Browser über das document Objekt zur Verfügung. Um auf ein Tag, auch HTML-Element genannt, zugreifen zu können, muss man es identifizieren. Das geht am besten, wenn man dem Tag im HTML Code eine ID, einen Identifikator, zuweist.

//Zugriff über getElementbyId
<html>
    <meta charset="utf-8"> 
    <body>
        <p>Hier ist ein einfacher Absatz</p>

        Um auf ein Element zuzugreifen ist die Zuordung einer ID erforderlich.
        <p id="absatz2">Hier ist der Absatz mit der ID absatz2 festgelegt worden.</p>
        <script>
            //so, hier folgt das Javascript
            //Der Zugriff auf das Element mit der ID absatz2 erfolgt über document.getElementbyId
            document.getElementById("absatz2");
            //Um mit dem Wert arbeiten zu können muss eine Variable festgelegt werden.
            var inhalt=document.getElementById("absatz2");
            //Zur Überprüfung wird der Wert in der Konsole ausgeben:
            console.log(inhalt.innerHTML);

</script>
    </body>
</html>

Anhand dieses einfachen Dokument soll die Arbeit erläutert werden.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>DOM Document Object Modell</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    
</head>
<body>
    <p>Erster Absatz</p>
    <p>Zweiter Absatz mit <span style="font-weight: bold;">Fettschrift</span></p>
    <p>Dritter Absatz mit <a href="www.edv-bildung.de">einem Link</p></a>
</body>
</html>

Das Windowobjekt wird von allen Browsern unterstützt. Es stellt das Fenster des Browsers dar. Alle globalen JavaScript-Objekte, -Funktionen und -Variablen werden automatisch Mitglieder des windowobjekts. Globale Variablen sind Eigenschaften des Fensterobjekts. Globale Funktionen sind Methoden des windowobjekts. Auch das document-Objekt (des HTML-DOM) ist eine Eigenschaft des Window-Objekts:

window.document.getElementById("header"); 

Ist das gleiche wie:

document.getElementById("header"); 

Andere Fenstermethoden Einige andere Methoden:

  • window.open() – öffne ein neues Fenster
  • window.close() – schließt das aktuelle Fenster
  • window.moveTo() – verschiebt das aktuelle Fenster
  • window.resizeTo() – Größe des aktuellen Fensters ändern