Document Object Model

Der Parser baut aus dem Datenstrom das Strukturmodell des Dokuments, das DOM. Darunter ist die Element-Hierarchie und ihre Zugehörigkeit zu Klassen und Identitäten zu verstehen. Der eigentliche Inhalt liegt in "(Text)-Knoten". Man unterscheidet zwischen Eltern-Elementen, Kind-Elementen und Geschwister-Elementen.

Überschrift

Bitte den Quelltext anschauen

Fließtext

Fließtext

Fließtext

 

 

DOM Visualizer

DOM-Tree

 

Manipulation des DOM

Das DOM

Das HTML DOM (Document Object Model) definiert

• Die HTML-Elemente als Objekte
• Die Eigenschaften aller HTML-Elemente
• Die Methoden, um auf die Elemente zuzugreifen
• Die Ereignisse, die Elemente entgegennehmen können

Dadurch dient das DOM als Programmierschnittstelle, um HTML-Elemente zu verändern, hinzuzufügen, zu löschen oder um Informationen über sie zu erhalten.

Das DOM ist ein W3C Standard.

JavaScript

Die bevorzugte Sprache ist JavaScript, bzw. ein Framework wie jQuery, das auf JavaScript basiert.

 

Methoden und Eigenschaften

(Methods and Properties)

Zum Testdokument, bitte die JavaScript-Console des Browsers benutzen.

Aufgaben

Den Inhalt des Elements einer bestimmt ID (id="headline") anzeigen und ändern

Methode: document.getElementById("headline")

Eigenschaft: innerHTML

Befehl: document.getElementById("headline").innerHTML = "Guten Abend!";

Den Inhalt mehrerer Elemente anzeigen

Methode: document.getElementsByTagName("p");

Methode: document.getElementsByClassName("hellblau");

Das Aussehen eines Elements ändern

Methode: document.getElementById("headline").setAttribute("class", "hellrot");

Ein p-Element einfügen

var para = document.createElement("h4");

var node = document.createTextNode("Das ist eine neu hinzugefügte h4-Überschrift.");

para.appendChild(node);

var element = document.getElementById("wrapper");

element.appendChild(para);

para.setAttribute("id", "new")

Ein Element entfernen

Es ist nötig, das Eltern-Element zu identifizieren, bevor ein Kind-Element entfernt werden kann.

var child = document.getElementById("wrapper");

child.parentNode.removeChild(child);

Einen Event entgegennehmen

Innerhalb des HTML-Elements wird ein gewöhnlicher HTML-Event oder ein DOM-Event genutzt.

HTML-Events: https://www.w3schools.com/js/js_events.asp

DOM-Events: https://www.w3schools.com/jsref/dom_obj_event.asp

Events entgegennehmen

Vier Beispiele

onclick (Mausklick)

Direkter Befehl: <h4 onclick="this.innerHTML = 'NEU'" style='cursor:pointer;'>ALT</h4>

Mit dem Anklicken verändern Sie den Inhalt. Danach bitte die Seite reloaden.

Verweis auf eine Funktion: <h4 onclick="aendereText(this)" style='cursor:pointer;'>ALT</h4>

Mit dem Anklicken verändern Sie den Inhalt. Danach bitte die Seite reloaden.

onmouseover (Mouseover)

<p onmouseover="zeigeUhrzeit()" style='cursor:pointer;'>DIE UHRZEIT IST <span id='uhr'></span></p>

DIE UHRZEIT IST

onmousedown (Maustaste abfragen)

<p onmousedown="zeigeButton()" style='cursor:pointer;'>HIER KLICKEN</p>

HIER KLICKEN  

onkeydown (Tastaturereignis)

Bitte drücken Sie eine Taste auf der Tastatur Ihres Computers!

Testdokument

Bitte die JavaScript-Konsole des Browsers verwenden (Chrome oder Firefox).

h2-Element mit id="headline" innerhalb von article-Element der id=".wrapper"

p-Element mit id="absatz" innerhalb von article-Element der Klasse ".hellblau"

Weiteres p-Element ohne id und Klasse.

DOM-Tree des oberen Dokuments