JavaScript/Objekte/DOM/document/node

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das node-Objekt ist das zentrale Objekt des Document Object Models (DOM) (node = Knoten).

Eigenschaften und Methoden finden Sie unter JavaScript/Objekte/DOM/element.

Hintergrund ist das Modell, dass ein Auszeichnungssprachen-Dokument, egal ob in HTML oder einer anderen, XML-basierten Auszeichnungssprache geschrieben, aus einem Baum von Knoten besteht. Um sich mit diesem Modell näher zu beschäftigen, können Sie im XML-Kapitel dieses Dokuments den Abschnitt Baumstruktur und Knoten einer XML-Datei lesen.


[Bearbeiten] Verwendung

Jedes Element, jedes Attribut und alle Zeichendaten stellen eigene Knoten dar. Diese Knoten bilden die Baumstruktur. Das node-Objekt stellt Eigenschaften und Methoden bereit, um auf die einzelnen Knoten zuzugreifen, egal, wie tief diese Knoten in der Baumstruktur liegen.

Das node-Objekt stellt damit die allgemeinere und für alle XML-gerechten Sprachen gültige Variante dessen dar, was die HTML-Elementobjekte speziell für HTML darstellen. Sie können in JavaScripts, die in HTML-Dateien notiert oder eingebunden sind, sowohl mit den HTML-Elementobjekten als auch mit dem node-Objekt arbeiten. Manches ist über die HTML-Elementobjekte bequemer zu lösen, für andere Aufgaben eignet sich wiederum das node-Objekt besser. Das node-Objekt gilt unter Puristen allerdings als das "reinere" DOM, eben weil es nicht auf HTML beschränkt ist.

Um auf die Eigenschaften und Methoden des node-Objekts zugreifen zu können, benötigen Sie einen Knoten. Um auf vorhandene Knoten im Dokument zuzugreifen, werden die Methoden des document-Objekts:

verwendet. Ausgehend davon können Sie die Attributknoten, Textknoten und weitere Element-Kindknoten eines Elements ansprechen.

Beispiel
<html>
<head>
  <title>Test</title>
</head>
<body>
<h1 id="Ueberschrift" align="center">Knoten in der <i>Baumstruktur</i></h1>
  <script type="text/javascript">
    Elementknoten = document.getElementById("Ueberschrift");
    WertErsterKindknoten = Elementknoten.firstChild.nodeValue;
    document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + WertErsterKindknoten + "<\/b>");
</script>
</body>
</html>

Die Beispieldatei enthält eine Überschrift erster Ordnung mit Text, von dem ein Teil wiederum als kursiv ausgezeichnet ist. In dem JavaScript, das unterhalb davon notiert ist, wird zunächst mit document.getElementById("Ueberschrift") (ohne weitere Eigenschaft oder Methode dahinter) auf das h1-Element der Überschrift zugegriffen. Der Rückgabewert von getElementById() ist das Knotenobjekt der Überschrift. Der Rückgabewert wird im Beispiel in der Variablen Elementknoten gespeichert. Diese Variable speichert also einen gültigen Knoten des Dokuments, und auf die Variable sind daher die Eigenschaften und Methoden des node-Objekts anwendbar. Im Beispiel wird mit Elementknoten.firstChild.nodeValue der Wert des ersten Kindknotens der Überschrift ermittelt. Dessen Wert wird schließlich mit document.write() ins Dokument geschrieben.

Die Verwendung von Variablen ist nicht zwingend erforderlich. Das obige Beispiel funktioniert genauso, wenn Sie notieren:
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + document.getElementById("Ueberschrift").firstChild.nodeValue + "<\/b>");

Der geschriebene Wert lautet im Beispiel: Knoten in der ... der erste Kindknoten der Überschrift ist also ihr Zeicheninhalt. Das Wort Baumstruktur gehört nicht dazu, da es ja durch ein i-Element ausgezeichnet ist, das selbst wieder einen eigenen, weiteren Kindknoten der Überschrift darstellt.

Die beiden Attribute, die im einleitenden Überschriften-Tag notiert sind, zählen übrigens nicht als Kindknoten. Das W3-Konsortium ist der Auffassung, dass Attribute hierarchisch gesehen keine "Unterobjekte" von Elementen sind, sondern "assoziierte Objekte". Um auf Attributknoten zuzugreifen, bietet das node-Objekt eigene Eigenschaften und Methoden an. Zum Verständnis ist es jedoch wichtig, dass die Attribute eines Elements nicht als dessen Kindknoten betrachtet werden, weshalb etwa eine Objekteigenschaft wie firstChild die Attribute übergeht.

ToDo:    (weitere ToDos)

Aktualisieren
  • Verhältnis zu element.
  • attr. nicht als Kindknoten nach DOM4
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke