JavaScript - Auf DOM-Elemente zugreifen

documentS.797 Das umfassende Referenzwerk

Ein HTML- oder XML-Dokument

Verfügbarkeit

DOM Level 1 Core

Erbt von

Node -> Document

Eigenschaften

  • readonly AbstractView defaultView
  • readonly DocumentType doctype
  • readonly Element documentElement
  • readonly DOMImplementation implementation
  • readonly StyleSheetList styleSheets

Methoden

  • createAttribute()
  • createAttributeNS()
  • createCDATASection()
  • createComment()
  • createDocumentFragment()
  • createElement()
  • createElementNS()
  • createEntityRefernce()
  • createEvent()
  • createNodeIterator()
  • createProcessingInsruction()
  • createRange()
  • createTextNode()
  • createTreeWalker()
  • getElementById()
  • getElementsByTagName()
  • getElementsByTagNameNS()
  • getOverrideStyle()
  • importNode()

Beschreibung

Das Document-Interface ist der Wurzelknoten eines Dokumentebaums. Ein Document-Knoten kann mehrere Kinder Haben, doch kann nur eienes dieser Kinder ein Element-Knoten sein: Dies ist das Wurzelelement des Dokumentes.

Die meisten von Document-Interface definierten Methoden sind "Factory-Methoden", die dazu dienen, verschiedene Arten von Knoten zu erzeugen, die in dieses Dokument eingefügt werden können.

Ausnahmen davon sind getElementById() und getElementsByTagName(), die nützlich sind, wenn ein spezielles Element in einem Dokumentenbaum gesucht wird.

document.getElementById() S.810 Das umfassende Referenzwerk

Sucht ein Element mit der angegebenen, eindeutigen ID

Überblick

  • Element getElementById(String elementId)

Argumente

  • elementId

    Der Wert des id-Attributs des gewünschten Elements.

Rückgabewert

Der Element-Knoten, der das Dokumentelement mit dem angegebenen id-Attribut darstellt, oder null, wenn kein solches Element gefunden wird.

Beschreibung

Diese Methode sucht im Dokument einen Element-Knoten mit einem -id-Attribut, dessen Wert elementId ist, und gibt dieses Element zurück. Ansonsten null.

document.getElementsByTagName() S.810 Das umfassende Referenzwerk

Gibt alle Element-Knoten mit dem angegebenene Namen zurück

Überblick

  • Node[] getElementsByTagName(String tagname)

Argumente

  • tagname

    Der Tag-Name des zurückgegebenen Element-Knotens oder der Wildcard-String"*", mit dem ohne Berücksichtigung des Tag-Namens alle Element-Knoten im Dokument zurückgegeben werden.

Rückgabewert

Ein schreibgeschütztes Array (technisch gesehen eine Node-List) aller Element-Knoten im Dokumentbaum mit dem angegebenen Tag-Namen.

Beschreibung

Diese Methode gibt eine Node-List zurück. Sie enthält alle Element-Knoten im Dokument, die den angegebenen Tag-Namen haben, und zwar in derselben Reihenfolge, in der sie auch im Dokumentquelltext auftauchen..

nodeS.898 Das umfassende Referenzwerk

Ein Knoten in einem Dokumentenbaum

Verfügbarkeit

DOM Level 1 Core

Subinterfaces

  • Attr
  • CharacterData
  • Document
  • DocumentFragment
  • DocumentType
  • Element
  • Entity
  • EntityRefernce
  • Notation
  • ProcessingInstruction

Eigenschaften

  • readonly NameNodeMap attributes
  • readonly Node[] childNodes
  • readonly Node firstChild
  • readonly Node lastChild
  • readonly String localName
  • readonly String namespaceURI
  • readonly Node nextSibling
  • readonly String nodeName
  • readonly unsigned short nodeType
  • String nodeValue
  • readonly Document ownerDocument
  • readonly Node parentNode
  • String prefix
  • readonly Node previousSibling

Methoden

Beschreibung

Alle Objekte in einem Dokumentenbaum implementieren das Node-Interface, das die wichtigste Eigenschaften und Methoden zum Durchlaufen und Bearbeiten des Baums zur Verfügung stellt.

Node[] childNodesS.899 Das umfassende Referenzwerk

Enthält die Kindknoten des aktuellen Knotens. Diese Eigenschaft sollte nie null sein. Bei Knoten ohne Kinder ist childNodes ein Array mit dem length-Wert null. Diese Eigenschaft ist technisch gesehen eine NodeList-Objekt, verhält sich aber genau wie ein Array von Node-Objekten. Das zurückgegebene NodeList-Objekt ist "live". Alle Änderungen an der Liste der Kinder dieses Elementes werden durch NodeList unmittelbar sichtbar.

node.firstChildS.899 Das umfassende Referenzwerk

readonly

Das erste Kind dieses Knoten oder null, wenn der Knoten keine Kinder hat.

node.lastChildS.899 Das umfassende Referenzwerk

readonly

Das letzte Kind dieses Knoten oder null, wenn der Knoten keine Kinder hat.

node.nodeValueS.899 Das umfassende Referenzwerk

String

Der Wert eines Knotens. Bei Textknoten der Textinhalt. Bei anderen Knoten hängt der Wert von dem nodeType ab.

Beispiel:

<script type="text/javascript">

function arbeiteMitDemDOM() {

document.getElementById("Absatz").firstChild.nodeValue="Willkommen bei JavaScript!";

}

</script>

/* Die Funktion "arbeiteMitDemDOM" darf erst ausgeführt werden wenn die Seite geladen ist. Da sonst null zurückgegeben wird, da die id="Absatz" noch nicht vorhanden ist.

Das body-Tag bekommt einen Event-Handler onload, der die Funktion "arbeiteMitDemDOM()" aufruft. */

<body onload="arbeiteMitDemDOM();">

Kurzform der oberen Funktion mit einer anonymen Funktion

<script type="text/javascript">

window.onload = function() {

document.getElementById("Absatz").innerHTML="Willkommen bei JavaScript!";

}

</script>

.firstChild.nodeValue entspricht .innerHTML

Der Funktionsaufruf im HTML-Code (onload im body) wird durch einen JavaScript-Aufruf ersetzt. window.onload

Ausgabe:

zurück