JavaScript/DOM/Node

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Node-Schnittstelle (node = Knoten) ist das zentrale Objekt des Document Object Models (DOM). Es repräsentiert einen einzelnen Knoten im Elementenbaum. Eigenschaften und Methoden betreffen entweder Textknoten oder Elementknoten. Daneben existiert die Schnittstelle Element, die nur Elementknoten betrifft.


Inhaltsverzeichnis

[Bearbeiten] Allgemeines

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.


DOM - Nodes im Elementenbaum
DOM - Nodes im Elementenbaum

[Bearbeiten] Knotentypen

Innerhalb eines gewöhnlichen HTML-Dokuments gibt es mehrere wichtige Knotentypen, die Sie unterscheiden müssen:

  • Elementknoten


  • Attributknoten


  • Textknoten


  • Kommentare


Sie können die unterschiedlichen Typen mit Node.nodeType identifizeren.

[Bearbeiten] Elementknoten

Ein Elementknoten besteht aus einem HTML-Element im Elementenbaum. Sie können auf ihn mit den Eigenschaften und Methoden des Node-Interfaces, aber auch denen des Element-Interfaces zugreifen.

[Bearbeiten] Attributknoten

Attributknoten zählen übrigens nicht als Kindknoten. Das W3-Konsortium ist der Auffassung, dass Attribute hierarchisch gesehen keine "Unterobjekte" von Elementen sind, sondern "assoziierte Objekte".[1] Der Begriff Attributknoten ist hier Knoten im Sinne der Graphentheorie, jedoch keine Instanz der Schnittstelle Node.

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.

[Bearbeiten] Textknoten

Normaler Text innerhalb von Textstrukturierungs- und Textauszeichnungselementen bildet Textknoten.

[Bearbeiten] Kommentare

Die Eigenschaft nodeType gibt für Kommentare den Typ 8 zurück. Der Textinhalt innerhalb des Kommentars bildet keinen eigenen Textknoten.[2]

[Bearbeiten] Verwendung

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

Das Node-Interface 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 JavaScript sowohl mit den HTML-Elementobjekten als auch mit dem Node-Interface arbeiten. Manches ist über die HTML-Elementobjekte bequemer zu lösen, für andere Aufgaben eignet sich wiederum das Node-Interface 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, verwenden Sie die Methoden des document-Objekts:

  • getElementById(): kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten
  • getElementsByName(): kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein)
  • getElementsByTagName(): kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".
  • querySelector(): gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht.
  • querySelectorAll(): gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen

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" class="topnews">Knoten in der <i>Baumstruktur</i></h1>

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

[Bearbeiten] NodeList

Eine NodeList ist eine Sammlung mehrerer Knoten. Da diese mit dem Laden der Webseite dynamisch erweitert werden kann, wird Sie nach DOM-Manipulationen auch live node list genannt.

Beachten Sie: auch wenn sie so aussieht, ist die nodeList kein Array.[3]

Sie können sie mit diesen Methoden auslesen.

Eigenschaft:

Methode:

[Bearbeiten] Nodelist.length

Die Eigenschaft Nodelist.length liest die Anzahl der Knoten in der NodeList aus.

[Bearbeiten] Nodelist.item()

Die Methode Nodelist.item() ermöglicht es, auf einen bestimmten Knoten der NodeList zuzugreifen.

Beispiel
nodeItem = nodeList.item(index)

[Bearbeiten] Quellen

  1. MDN:Attr
  2. W3C: Interface Comment
  3. MDN: Why_is_NodeList_not_an_Array

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML