DOM Level 2

Schnittstelle zum Zugriff auf HTML-Dokumente

formal spezifiziert und standardisiert durch W3C
von allen gängigen Browsern unterstützt
auch für andere Programmiersprachen

Erweiterungen gegenüber DOM Level 0

alle Elemente und alle Attribute einer HTML-Seite ansprechbar
Zugriff auf XHTML-Dokumente
Erzeugung von Elementen und Einhängen in den Dokumenten-Baum

DOM Interfaces

Beispiel: HTML-Dokument

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM-Tree</title>
</head>
<body>
  <p>Ein erster Absatz <img src="logo.gif"/> <br/>
    <a href="http://www.hs-mannheim.de">Home</a>
  </p>
  <form action="#" method="GET">
    <input type="text" name="nachname"/>
    <input type="text" name="vorname"/>
    <select name="geschlecht">
      <option value="m">männlich</option>
      <option value="f">weiblich</option>
    </select>
  </form>
</body>
</html>

Beispiel: DOM-Tree zum Dokument

Finden von Elementen

Auf document

querySelector(selector): Liefert das erste Element, auf das der CSS-Selektor zutrifft.
querySelectorAll(selector): Liefert ein Array aller Elemente auf die der CSS_Selektor zutrifft.
getElementById(id): Liefert das Element mit dem id-Attributwert id

Auf einem Element

closest(selector): Liefert das erste Kind, auf das der Selector passt oder das Element selbst, wenn es selbst passend ist

Die :link und :visited Pseudoklassen können aus Sicherheitsgründen nicht selektiert werden

// Alle Überschriften h1-h3 finden
let titles = document.querySelectorAll("h1, h2, h3");

// Ein Element über seine ID finden
let button = document.querySelector("#buttonid");
let submit = document.getElementById("buttonid");

// Kinder finden
let section = document.querySelector("#intro";
let summary = section.closest(".summary");

Baum-Operationen

node, document und element haben Methoden zum Durchwandern und Manipulieren des Baums

Erzeugung neuer Knoten mithilfe des document-Objektes
Durchwandern des Baums mithilfe der node-Objekte
Methoden zur Strukturänderung der node-Objekte

Das node-Objekt

Knoten des DOM-Baumes werden durch Node-Objekte repräsentiert

Mögliche Arten von Knoten

Elementknoten
Textknoten
Attributknoten
Kommentarknoten

Node-Objekt: Attribute

Attribut	Bedeutung
`nodeName`	Elementname
`nodeType`	Knotentyp (1=Element, 2=Attribut, 3=Text)
`nodeValue`	Wert des Knotens
`data`	Rumpftext (nur bei Textknoten)
`attributes`	Array aller Attribute
`parentNode`	Vaterknoten
`childNodes`	Array aller Kinderknoten
`firstChild`	erster Kindknoten
`lastChild`	letzter Kindknoten
`previousSibling`	linker Nachbarknoten
`nextSibling`	rechter Nachbarknoten

HTML-Dokument

<html>
  <head><title>Test</title></head>
  <body>Hello World!</body>
</html>

JavaScript

let html = document.querySelector("html");
let title = html.firstChild.firstChild;
let hello = html.childNodes[2];
// childNodes[1] ist das Newline nach <head>

Node-Objekt: Methoden

Methode	Bedeutung
`getAttribute(name)`	Liefert Wert des Attributes name
`setAttribute(name, value)`	Setzt Wert des Attributes name auf value
`removeAttribute(name)`	Attribut mit Namen name entfernen
`cloneNode(recursiveFlag)`	Liefert Knotenkopie (rekursiv falls recursiveFlag=true)
`hasChildNodes()`	Liefert true, wenn Kindknoten vorhanden sind, sonst false
`appendChild(new)`	Knoten new als letztes Kind anfügen
`insertBefore(new, node)`	Knoten new links von bestehendem Knoten node einfügen
`removeChild(node)`	Kind node entfernen
`replaceChild(new, old)`	Ersetzt Kind old durch new
`getAttributeNode(name)`	Liefert Knoten des Attributs name
`setAttributeNode(node)`	Attributknoten node hinzufügen
`removeAttributeNode(node)`	Attributknoten node entfernen

Methode	Bedeutung
`appendData(text)`	Hängt text an
`insertData(start, text)`	Fügt text ab der Position start ein
`replaceData(start, len, text)`	Ersetzt len Zeichen des Textes ab start mit text
`deleteData(start, text)`	Entfernt len Zeichen des Rumpftextes ab start

Erzeugen von Elementen

Methode	Bedeutung
`createElement(tagName)`	Erstellt Element vom Typ `tagName`
`createAttribute(attrName)`	Erstellt Attribut mit dem Namen `attrName`
`createTextNode(initText)`	Erstellt und initialisiert Textknoten

Knoten-Beziehungen

Zugriff auf Attribute (DOM 2 Kern)

Zugriff über die Kernobjekte von DOM 2

Attribute sind in Unterknoten gespeichert
Zugriff über element.getAttribute() bzw. element.setAttribute()
z. B. img.setAttribute("src", "img/portrait.jpg");

Zugriff auf Attribute (DOM 2 HTML)

Zugriff über die HTML-Erweiterungen von DOM 2

Objekte haben Attribute, die direkt angesprochen werden können
Namen entsprechen HTML-Namen (Ausnahme class wird zu className)
z. B. img.src = "img/portrait.jpg";

Beispiel: Erzeugung (DOM-Stil)

let div = document.getElementById("leer_dom");
let img = document.createElement("img");
img.setAttribute("src", "img/html-portrait.jpg");
img.setAttribute("alt", "Sir Karl Popper");
img.setAttribute("width", "70px");
img.setAttribute("style", "border: 1px solid; border-color: red;");
div.appendChild(img);
let p = document.createElement("p");
let txt = document.createTextNode("Dies ist ein Absatz");
p.appendChild(txt);
div.appendChild(p);

Beispiel: Erzeugung (HTML-Stil)

let div = document.getElementById("leer_html");
let img = document.createElement("img");
img.src = "img/html-portrait.jpg";
img.alt = "Sir Karl Popper";
img.width = 70;
img.style.borderWidth = "1px";
img.style.borderStyle = "solid";
img.style.borderColor = "red";
div.appendChild(img);
let p = document.createElement("p");
let txt = document.createTextNode("Dies ist ein Absatz");
p.appendChild(txt);  div.appendChild(p);

Zugriff auf Inline-Styles

Zugriff auf Style des HTML-Elements (nicht CSS-Datei)

haben Vorrang vor CSS-Datei, vgl. Kaskadierungsregeln
Werte sind Strings (enthalten px, %, pt, em)
Style ist als Unterobjekt realisiert:
document.getElementById("Hugo").style.fontSize = "12pt";

Bildung der CSS-Attributnamen

Bindestriche sind nicht zulässig in JavaScript-Bezeichnern
Bindestrich entfernen, nächsten Buchstaben groß schreiben:
fontSize, fontWeight, backgroundColor ...

Zugriff auf Text

Text in einem Tag wird in Unterknoten gespeichert
Text steht im Attribut nodeValue
kann durch Zuweisung geändert werden (ohne HTML-Tags)

<p id="absatz">Ein <em>wichtiger</em> Text</p>

Beispiel DOM-Manipulation

Alle Absätze im Dokument gelb einfärben

let allParas = document.querySelectorAll("p");

for (let i = 0; i < allParas.length; i++) {
    allParas[i].style.backgroundColor = "yellow";
}