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 ();