Das W3C spezifiziert mit dem DOM, welche Objekte und Eigenschaften ein HTML- oder XML-Dokument in JavaScript repräsentieren.
Der Knoten 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 |
Das Dokument dient als 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 |
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 | () |
Attribute sind die Blätter des Baums.
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 |
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 |
Zustand von Tastatur und Maus beim Eintreten einess Ereignisses.
Event | |||
const Number | type | Art des Ereignisses | |
const Number | modifiers | Status der Sondertasten | |
const Number | which | Tastatur- oder Maustastencode | |
const Number | button | Maustastencode | |
const Number | keyCode | Tastaturcode | |
const Number | alt | Sondertasten | |
const Number | screenX | Mauskoordinaten relativ zum Bildschirm | |
const Number | pageX | Mauskoordinaten relativ zum Dokument | |
const Number | clientX | Mauskoordinaten relativ zum Anzeigebereich | |
const Number | offsetX | Mauskoordinaten relativ zum Objekt | |
const Number | x | Mauskoordinaten relativ zum Elternelement |
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 |
Nutzlast für Drag&Drop-Operationen.
DataTransfer | |||
String | dropEffect | none|copy[Link|Move]|link[Move]|move|all|uninitialized | |
FileList | files | Dateien (bei Dateioperation) | |
const ItemList | items | Objekte (bei Elementoperation) | |
const String | types | Liste der Formate | |
clearData | ([format]) | Nutzlast löschen | |
String | getData | (format) | Nutzlast lesen |
setData | (format, data) | Nutzlast, meist text/plain | |
setDragImage | (img, dx, dy) | Bildelement mit Offset |
HTTP-Anfragen für dynamische Webanwendungen im AJAX-Stil.
XMLHttpRequest : Object | |||||
const Number | readyState | Aktueller Zustand | |||
UNSENT | 0 | Vorher | |||
OPENED | 1 | Verbindung hergestellt, send möglich | |||
HEADERS_RECEIVED | 2 | ||||
LOADING | 3 | ||||
DONE | 4 | Nachher | |||
const EventListener | onreadystatechange | Rückruf-Funktion | |||
Number | timeout | Wartezeit in Millisekunden | |||
Boolean | withCredentials | Ohne oder mit Authentifizierung | |||
XMLHttpRequestUpload | upload | ! | |||
const Number | status | = 200 | HTTP Statuscode | ||
const String | statusText | = "OK" | HTTP Statustext | ||
const String | responseText | Inhalt als Zeichenkette | |||
const Document | responseXML | Inhalt als Baumstruktur | |||
const String | responseType | = "text" | Zeichenkette | ||
| "document" | Baumstruktur | ||||
| "json" | JSON Objekt | ||||
| "arraybuffer" | |||||
| "blob" | Binärdaten | ||||
const Object | response | Inhalt abhängig vom Typ | |||
open | (method, url) | Öffnet Verbindung zu einem Webserver | |||
open | (method, url, function, username, password) | ||||
setRequestHeader | (name, value) | Definiert zusätzliche Anfrage-Header | |||
send | () | Sendet Anfrage | |||
send | (String) | Sendet Textdaten | |||
send | (Document) | Sendet Baumstruktur | |||
send | (FormData) | Sendet Formulardaten | |||
send | (ArrayBuffer) | Sendet Binärdaten | |||
send | (blob) | Sendet Binärdaten-Blob | |||
abort | () | Bricht Verbindung ab | |||
String | getAllResponseHeaders | () | Liefert alle Antwort-Header | ||
String | getResponseHeader | (name) | Liefert einen Antwort-Header | ||
overrideMimeType | (type) | Biegt den Medientyp um |
Das folgende Beispiel zeigt eine Interaktion mit einem Webserver:
var xhr = new XMLHttpRequest(); xhr.onload = () => { console.log(xhr.getResponseHeader ("Content-Type")); } xhr.open ("GET", "/index.html"); xhr.send ();