JavaScript-DOM-Dokument


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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 Dokumentobjekt.

Nachfolgend finden Sie einige Beispiele dafür, wie Sie das Dokumentobjekt für den Zugriff auf und verwenden können HTML manipulieren.


HTML-Elemente finden

document.getElementById(id)

Suchen Sie ein Element anhand der Element-ID

document.getElementsByTagName(name)

Suchen Sie Elemente nach Tag-Namen

document.getElementsByClassName(name)

Suchen Sie Elemente nach Klassennamen


HTML-Elemente ändern

element.innerHTML =  new html content

Ändern Sie den inneren HTML-Code eines Elements

element.attribute = new value

Ändern Sie den Attributwert eines HTML-Elements

element.style.property = new style

Ändern Sie den Stil eines HTML-Elements

element.setAttribute(attribute, value)

Ändern Sie den Attributwert eines HTML-Elements


Elemente hinzufügen und löschen

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 hinzu

document.replaceChild(new, old)

Ersetzen Sie ein HTML-Element

document.write(text)

Schreiben Sie in den HTML-Ausgabestream



Hinzufügen von Ereignishandlern

document.getElementById(id).onclick = function(){code}

Hinzufügen von Event-Handler-Code zu einem Onclick-Ereignis


HTML-Objekte finden

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.

document.anchors

Gibt alle <a>-Elemente zurück, die ein Namensattribut haben. Level 1

document.applets

Veraltet. Level 1

document.baseURI

Gibt den absoluten Basis-URI des Dokuments zurück. Stufe 3

document.body

Gibt das <body>-Element zurück. Level 1

document.cookie

Gibt das Cookie des Dokuments zurück. Level 1

document.doctype

Gibt den Dokumenttyp des Dokuments zurück. Stufe 3

document.documentElement

Gibt das <html>-Element zurück. Stufe 3

document.documentMode

Gibt den vom Browser verwendeten Modus zurück. Stufe 3

document.documentURI

Gibt den URI des Dokuments zurück. Stufe 3

document.domain

Gibt den Domänennamen des Dokumentenservers zurück. Level 1

document.domConfig

Veraltet.. Stufe 3

document.embeds

Gibt alle <embed>-Elemente zurück. Stufe 3

document.forms

Gibt alle <form>-Elemente zurück. Level 1

document.head

Gibt das <head>-Element zurück. Stufe 3

document.images

Gibt alle <img>-Elemente zurück. Level 1

document.implementation

Gibt die DOM-Implementierung zurück. Stufe 3

document.inputEncoding

Gibt die Kodierung (Zeichensatz) des Dokuments zurück. Stufe 3

document.lastModified

Gibt das Datum und die Uhrzeit der Aktualisierung des Dokuments zurück. Stufe 3

document.links

Gibt alle <area>- und <a>-Elemente zurück, die ein href-Attribut haben. Level 1

document.readyState

Gibt den (Lade-)Status des Dokuments zurück. Stufe 3

document.referrer

Gibt den URI des Referrers (des verlinkenden Dokuments) zurück. Level 1

document.scripts

Gibt alle <script>-Elemente zurück. Stufe 3

document.strictErrorChecking

Gibt zurück, wenn eine Fehlerprüfung erzwungen wird. Stufe 3

document.title

Gibt das <title>-Element zurück. Level 1

document.URL

Gibt die vollständige URL des Dokuments zurück. Level 1