1. Index
  2. Shell
  3. C
  4. POSIX
  5. JavaScript

Document Object Model

Das W3C spezifiziert mit dem DOM, welche Objekte und Eigenschaften ein HTML- oder XML-Dokument in JavaScript repräsentieren.

Basisklasse

Alle Knoten eines Dokuments können Ereignisse empfangen und auslösen. Daher erben sie die Methoden dieser Basisklasse.

EventTarget
addEventListener (type, listener) Behandlungsfunktion registrieren
removeEventListener (type, listener) Behandlungsfunktion entfernen
Boolean dispatchEvent (event) Ereignis auslösen

Knoten

Der Knoten wiederum ist die Basisklasse für alle Bestandteile eines Dokuments.

Node : EventTarget
const String baseURI URL der Wurzel des Dokuments
const Node[] childNodes Liste der Kindknoten
const Node firstChild Erster Kindknoten
const Boolean isConnected Wahr wenn der Knoten sein Dokument kennt
const Node lastChild Letzter Kindknoten
const Node nextSibling Rechter Knoten
const String nodeName Name des Knotens
const Number nodeType Knotentyp
String nodeValue Wert/Inhalt des Knotens
const Document ownerDocument Das enthaltende Dokument
const Node parentNode Elternknoten
const Element parentElement Elternelement
const Node previousSibling Linker Nachbarknoten
String textContent Kompletter Inhalt des Elements
Node appendChild (new) Hängt Kindknoten an, liefert den angehängten Knoten
Node cloneNode ([deep]) Dupliziert Knoten mit/ohne Kindern
Integer compareDocumentPosition(node) Vergleich Position eines Knotens in einem anderen Baum
Boolean contains (node) Wahr wenn der Parameter ein Kindknoten ist
Node getRootNode (options) Wurzelknoten
Boolean hasChildNodes () Prüft Existenz eines Kindknotens
Node insertBefore (new, ref) Fügt Kindknoten ein
Boolean isDefaultNamespace (uri) Wahr wenn die URI dem Namensraum entspricht
Boolean isEqualNode (node) Wahr wenn sich die Knoten gleichen
Boolean isSameNode (node) Wahr wenn es der selbe Knoten ist
String lookupPrefix (uri) Liefert Präfix zum Namensraum
String lookupNamespaceURI (prefix) Liefert Namensraum-URI zum Präfix
normalize () Führt alle Textknoten zusammen
Node removeChild (old) Entfernt Kindknoten, liefert den entfernten Knoten
Node replaceChild (new, old) Ersetzt Kindknoten durch anderen Knoten
Knotentyp
1 Node.ELEMENT_NODE <…> Normales Element
2 Node.ATTRIBUTE_NODE name="…"
3 Node.TEXT_NODE …
4 Node.CDATA_SECTION_NODE <![CDATA[…]]>
5 Node.ENTITY_REFERENCE_NODE &…;
6 Node.ENTITY_NODE &…;
7 Node.PROCESSING_INSTRUCTION_NODE <?…?> Verarbeitungsanweisung
8 Node.COMMENT_NODE <!-- … --> Kommentar
9 Node.DOCUMENT_NODE Wurzel des Dokuments
10 Node.DOCUMENT_TYPE_NODE
11 Node.DOCUMENT_FRAGMENT_NODE
12 Node.NOTATION_NODE
DOCUMENT_POSITION_DISCONNECTED 1
DOCUMENT_POSITION_PRECEDING 2
DOCUMENT_POSITION_FOLLOWING 4
DOCUMENT_POSITION_CONTAINS 8
DOCUMENT_POSITION_CONTAINED_BY 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

Dokument

Der Kontext für die baumartige Struktur eines Dokuments.

Document : Node
const HTMLCollection anchors Ankerelemente
Element body = "" Hauptelement
const String characterSet = "" Zeichenkodierung (Aktuell)
const DocumentType doctype DTD
const DocumentType documentType DTD
const Element documentElement = "" Wurzelelement
String documentURI = "…" URL des Dokuments
const HTMLCollection embeds Multimedia-Objekte
FontFaceSet fonts Schriftarten
const HTMLCollection forms Formulare
const Element head = "" Kopfelement
const Boolean hidden = "" Sichtbarkeit der Seite
const HTMLCollection images Bilder
const DOMImplementation implementation
const HTMLCollection links Externe Verweise
const HTMLCollection plugins Plugins
const HTMLCollection scripts Skripte
const Element scrollingElement = "" Element mit Rolleisten
const String visibilityState = "" Sichtbarkeit (visible|hidden|prerender|unloaded)
const String cookie = "" Strichpunktseparierte Liste
const Window defaultView = "" Anzeigefenster
const String designMode = "" Editierbarkeit
const String dir = "" Schreibrichtung
const String domain = "" Clientseitig gespeicherte Zeichenkette
const Date lastModified = "" Datum der letzten Änderung
const Location location = "…"URL des Dokuments
const String readyState = "" Zustand der Anfrage
const String referrer = "" URL der aufrufenden Seite
const String title = "" Titel des Dokuments (<title>)
const String URL = "…"URL des Dokuments
Attr createAttribute (name) Attribut-Knoten erzeugen
CDATASection createCDATASection (text) Zeichendaten-Knoten erzeugen
Comment createComment (text) Kommentar-Knoten erzeugen
DocumentFragment createDocumentFragment () Behälter für Knoten erzeugen
Element createElement (name) Element-Knoten erzeugen
Event createEvent (type) Ereignisobjekt erzeugen
NodeIterator createNodeIterator (root[, type[, filter]]) Baumstruktur traversieren
ProcessingInstruction createProcessingInstruction(target, data) Verarbeitungsanweisung erzeugen
Range createRange () Bereichsobjekt erzeugen
Text createTextNode (text) Textknoten erzeugen
TreeWalker createTreeWalker (root, type[, filter]) Baumstruktur traversieren
Node adoptNode (node) Knoten aus anderem Dokument verschieben
Node importNode (node[, deep = false]) Knoten aus anderem Dokument kopieren
Node getElementById (id) Element anhand des id-Attributs suchen
HTMLCollection getElementsByClassName (names) Elemente anhand des class-Attributs suchen
HTMLCollection getElementsByTagName (names) Elemente anhang des Namens suchen
Node querySelector (selector) Das erste Element anhand des CSS-Selektors suchen
NodeList querySelectorAll (selector) Alle Elemente anhand des CSS-Selektors suchen
Boolean hasFocus () Dokument hat den Fokus
Document open () Öffnet Dokument zum Schreiben neuer Inhalte
write (markup) Schreibt ausgezeichneten Text ins Dokument
writeln (markup) Schreibt ausgezeichnete Textzeilen ins Dokument
close () Schließt Dokument

Zugriff auf die Strukturinformationen der DTD.

DocumentType : Node
const String name
const NamedNodeMap entities
const NamedNodeMap notations
const String publicId
const String systemId
const String internalSubset

Element

Elemente bilden die Baumstruktur des Dokuments.

Element : Node
NamedNodeMap attributes Liste der Attribute
DOMTokenList classList Liste der CSS-Klassen
const String className Wert des class-Attributs
String id Wert des id-Attributs
String innerHTML Inhalt als HTML-Code
String outerHTML Element als HTML-Code
const String localName Name ohne Präfix
const String namespaceURI Namensraum
const String prefix Namensraum-Präfix
const String tagName Elementname
const String uri
ShadowRoot attachShadow ({mode: "open"})
String getAttribute (name) Liefert Wert eines Attributs
String[] getAttributeNames () Liefert Namen aller Attribute
DOMRect getBoundingClientRect () Liefert die Vereinigung aller Rahmen
DOMRect[] getClientRects () Liefert die Rahmen aller Boxen
HTMLCollection getElementsByClassName (name) Liefert Kindelemente anhand der Klasse
HTMLCollection getElementsByTagName (name) Liefert Kindelemente anhand des Namens
Boolean hasAttribute (name) Wahr wenn das Attribut existiert
Boolean hasAttributes Wahr wenn das Element Attribute hat
Element insertAdjacentElement (position, element)Fügt Nachbarelement ein
insertAdjacentHTML (position, text) Schneller als innerHTML
insertAdjacentText (position, text) Fügt Text ein
Node querySelector (selector) Das erste Element anhand des CSS-Selektors
NodeList querySelectorAll (selector) Alle Elemente anhand des CSS-Selektors
removeAttribute (name) Entfernt Attribut
setAttribute ( name, value) Setzt Wert des benannten Attributs
Boolean toggleAttribute (name, force) Schaltet Boole'sches Attribut um
setPointerCapture (id) Element fängt Mauszeiger-Ereignisse ein
releasePointerCapture (id) Gibt Mauszeiger-Ereignisse frei
NamedNodeMap
const Number length Anzahl der Knoten
Node item (index) Knoten an Position
Node setNamedItem (node) Knoten einfügen
Node getNamedItem (name) Knoten lesen
Node removeNamedItem (name) Knoten entfernen
ShadowRoot
const String model open oder closed
const Element host
Selection getSelection ()
Element elementFromPoint ()
Element[] elementsFromPoint ()
CaretPosition caretPositionFromPoint ()

Attribut

Attr : Node
const String name Name des Attributs
const String namespaceURI Namensraum
const String localName Name ohne Präfix
const Element ownerElement Elternelement
const String prefix Namensraum-Präfix
const Boolean specified Immer Wahr
String value Inhalt

Text

Die Klasse Text repräsentiert den Text innerhalb eines Elements.

Text : CharacterData
const String wholeText
HTMLSlotElement assigendSlot
Text splitText (offset)

Ein <!-- … -->-Kommentar wird nicht angezeigt.

Ein <![CDATA[…]]>-Abschnitt kann auch reservierte Zeichen enthalten.

Die Methoden der Basisklasse werden selten verwendet.

CharacterData : Node
String data Inhalt
const Number length Länge der Zeichenkette
appendData (text) Hängt Inhalt hinten an
insertData (offset, text) Fügt Inhalt ein
replaceData (offset, count, text) Ersetzt einen Teil des Inhalt
deleteData (offset, count) Löscht einen Teil des Inhalts
String substringData (offset, count) Liefert einen Teil des Inhalts

Literatur

  1. Mozilla: Document Object Model
  2. W³C: Document Object Model (DOM) Level 1 (10/1998)
  3. W³C: Document Object Model (DOM) Level 2 Core Specification (11/2000)
  4. W³C: Document Object Model (DOM) Level 3 Core Specification (04/2004)