JavaScript- HTML-DOM-Dokument
Das HTML-DOM-Dokumentobjekt ist der Eigentümer aller anderen Objekte auf Ihrer Webseite.
Das HTML-DOM-Dokumentobjekt
Das Dokumentobjekt repräsentiert Ihre Webseite.
Wenn Sie auf ein beliebiges Element in einer HTML-Seite zugreifen möchten, beginnen Sie immer mit dem Zugriff auf das Dokumentobjekt.
Nachfolgend finden Sie einige Beispiele dafür, wie Sie das Dokumentobjekt verwenden können, um auf HTML zuzugreifen und es zu bearbeiten.
HTML-Elemente finden
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
Ändern von HTML-Elementen
| Property | Description |
|---|---|
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTML element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
Elemente hinzufügen und löschen
| Method | Description |
|---|---|
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Hinzufügen von Ereignishandlern
| Method | Description |
|---|---|
| document.getElementById(id).onclick = function(){code} | Adding event handler code to an onclick event |
Suchen von HTML-Objekten
Das erste HTML DOM Level 1 (1998) definierte 11 HTML-Objekte, Objektsammlungen und Eigenschaften. Diese sind in HTML5 weiterhin gültig.
Später, in HTML DOM Level 3, wurden weitere Objekte, Sammlungen und Eigenschaften hinzugefügt.
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Deprecated | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |