JavaScript - Objektreferenz - document - node

1. Das Objekt

node ist das zentrale Objekt, um einzelne Knoten eines HTML-Dokuments anzusteuern. Um auf die Eigenschaften und Methoden zugreifen zu können, benötigt man einige Methoden des document-Objektes. Da es sich bei diesem Thema um ein sehr komplexes handelt, zeige ich euch erst mal nur eine Auswahl. Die komplette Liste findet ihr bei SelfHTML. Außerdem ist unter dem Punkt DOM-Manipulation mittlerweile eine ausführliche Einführung zu diesem Thema erschienen.

Ein Hinweis

Dieses Objekt kann man nicht über node ansteuern. Stattdessen greift man auf ein Element zu und nutzt erst dann die entsprechenden Eigenschaften und Methoden.

2. Eigenschaften

childNodes

Speichert alle verfügbaren Kindknoten und deren Inhalt in einem Array.

<div id="blubb">
  Kräh <strong>bla</strong> schwall <span>blubb</span> blubber
</div>
...
// Gibt die Anzahl der Kindknoten aus
alert (document.getElementById('blubb').childNodes.length);

data

Gibt den Inhalt eines Knotens aus, wenn es sich dabei um Text handelt.

<div id="blubb">
   Kräh bla schwall blubb blubber
</div>
...
alert (document.getElementById('blubb').firstChild.data);

firstChild, lastChild

Liefert das Objekt des ersten bzw. letzten Kindknotens eines Knotens.

<ul>
  <li>blubb</li>
  <li>blubber</li>
</ul>
...
alert (document.getElementsByTagName("ul")[0].lastChild.data);

nodeName, nodeValue, nodeType

nodeName liefert den Namen des Knotens, nodeValue den Inhalt und nodeType eine Ziffer für die Art des Knotens. Was nun jetzt welche Zahl bedeutet, erfahrt ihr zum Beispiel hier.

<p id="blubb" align="center">bla bla</p>
...
document.getElementsByTagName("body")[0].firstChild.nodeName;
document.getElementById("blubb").firstChild.nodeValue;

3. Methoden

appendChild, removeChild

Erzeugt einen neuen bzw. löscht einen alten Kindknoten.

<ul id="listing"><li>Punkt 1</li></ul>
...
bla = document.getElementById('listing');
bla.removeChild(bla.firstChild);
bla.appendChild(document.createElement('li'));

appendData, deleteData

Fügen einem Textknoten Daten hinzu oder löschen sie.

<p id="schwafel">Kräh bla schwall</p>
...
bla = document.getElementById('schwafel');

zufueg = document.createTextNode(' blubb blubber');
bla.firstChild.appendData(zufueg.nodeValue);
...
zeichen = bla.firstChild.nodeValue.length;
bla.firstChild.deleteData(0, zeichen);

hasChildNodes

Überprüft, ob ein Knoten weitere Kindknoten hat. Gibt im Erfolgsfall true zurück.

<p id="schwafel">Kräh bla schwall</p>
...
if (document.getElementById('schwafel').hasChildNodes())
...

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt