Die HTML-DOM-Dokument-Objekt ist der Besitzer aller anderen Objekte in Ihrer Webseite ein.
Die HTML-DOM Document Object
Das Dokument-Objekt repräsentiert Ihrer Webseite ein.
Wenn Sie ein Element in einer HTML-Seite zugreifen möchten, starten Sie immer mit dem Dokument-Objekt zugreifen.
Im Folgenden sind einige Beispiele dafür, wie Sie das Dokument-Objekt verwenden können, um und HTML manipulieren zugreifen.
Finding HTML-Elemente
| Methode | Beschreibung |
|---|---|
| document.getElementById( id ) | Finden Sie ein Element für Element-ID |
| document.getElementsByTagName( name ) | Finden Elemente nach Tag-Namen |
| document.getElementsByClassName( name ) | Finden Elemente von Klassennamen |
Ändern HTML-Elemente
| Methode | Beschreibung |
|---|---|
| element .innerHTML = new html content | Ändern Sie den inneren HTML eines Elements |
| element . attribute = new value | Ändern Sie den Attributwert eines HTML-Elements |
| element .setAttribute (attribute, value) | Ändern Sie den Attributwert eines HTML-Elements |
| element .style. property = new style | Ändern Sie den Stil eines HTML-Elements |
Hinzufügen und Löschen von Elementen
| Methode | Beschreibung |
|---|---|
| document.createElement( element ) | Erstellen Sie ein HTML-Element |
| document.removeChild( element ) | Entfernen Sie ein HTML-Element |
| document.appendChild( element ) | Fügen Sie ein HTML-Element |
| document.replaceChild( element ) | Ersetzen Sie ein HTML-Element |
| document.write( text ) | Schreiben Sie in den HTML-Ausgabestrom |
Hinzufügen von Events Handlers
| Methode | Beschreibung |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | Hinzufügen von Event - Handler - Code zu einem onclick Ereignis |
Die Suche nach HTML-Objekte
Die erste HTML-DOM Level 1 (1998), 11 definiert HTML-Objekte, Objektsammlungen und Eigenschaften. Diese sind immer noch gültig in HTML5.
Später, im HTML-DOM Level 3, mehr Objekte, Sammlungen und Eigenschaften wurden hinzugefügt.
| Eigentum | Beschreibung | DOM |
|---|---|---|
| document.anchors | Gibt alle <a> Elemente , die einen Namen Attribut | 1 |
| document.applets | Gibt alle <applet> Elemente (Veraltete in HTML5) | 1 |
| document.baseURI | Gibt den absoluten Basis-URI des Dokuments | 3 |
| document.body | Gibt den <body> Element | 1 |
| document.cookie | Gibt das Cookie des Dokument | 1 |
| document.doctype | Gibt das Dokument des Doctype | 3 |
| document.documentElement | Gibt die <html> Element | 3 |
| document.documentMode | Gibt den Modus vom Browser verwendet | 3 |
| document.documentURI | Gibt den URI des Dokuments | 3 |
| document.domain | Gibt den Domänennamen des Dokumentenservers | 1 |
| document.domConfig | Veraltet. Gibt die DOM - Konfiguration | 3 |
| document.embeds | Gibt alle <embed> Elemente | 3 |
| document.forms | Gibt alle <form> Elemente | 1 |
| document.head | Gibt den <head> Element | 3 |
| document.images | Gibt alle <img> Elemente | 1 |
| document.implementation | Gibt die DOM-Implementierung | 3 |
| document.inputEncoding | Gibt das Dokument der Kodierung (Zeichensatz) | 3 |
| document.lastModified | Gibt das Datum und die Uhrzeit des Dokuments wurde aktualisiert | 3 |
| document.links | Gibt alle <area> und <a> Elemente , die ein href - Attribut | 1 |
| document.readyState | Gibt den (Laden) Status des Dokuments | 3 |
| document.referrer | Gibt den URI des Referrer (die Verknüpfung Dokument) | 1 |
| document.scripts | Gibt alle <script> Elemente | 3 |
| document.strictErrorChecking | Gibt zurück, wenn die Fehlerprüfung wird erzwungen | 3 |
| document.title | Gibt den <title> Element | 1 |
| document.URL | Gibt die vollständige URL des Dokuments | 1 |