DOM-Manipulation - Das Wurzelelement

1. Der Start

Bevor man über das node-Objekt auf einen wie auch immer gearteten Knoten zugreifen kann, benötigt man eine Art Ausgangsposition, von der man beginnt. Dazu gibt es vier verschiedene Möglichkeiten, die uns das document-Objekt bietet.

document.getElementById

Greift auf ein HTML-/XML-Element zu, das eine ID hat. Und die muss in diesem Fall pro Dokument einzigartig(!) sein, da JavaScript sonst nicht weiß, welches Element gemeint ist. Also immer schön den HTML-Code validieren.

<div id="bla">
  ...
</div>

wurzel = document.getElementById('bla');

document.getElementsByTagName

Speichert alle Tags desselben Typs in einem Array. Bei folgendem Beispiel enthält das Array h2s zwei Einträge.

<h1>Bla</h1>
<h2>Blubb</h2>
<h2>Blubber</h2>

h2s = document.getElementsByTagName('h2');
alert (h2s.length);

getElementsByName

Arbeitet genau so wie getElementsByTagName, greift aber auf die Elemente über deren Attribut name zu. Ich persönlich habe damit bisher eher selten gearbeitet, da meiner Meinung nach diese Verwendung sehr oft eine Notlösung ist. Außerdem kann man das name-Attribut nicht bei jedem HTML-Element verwenden. Zumindest, wenn man Wert auf validen Code legt.

getElementsByClassName

Funktioniert genau so wie getElementsByTagName, greift aber auf den Klassennamen eines HTML-Elements zu. Ist allerdings im IE erst ab Version 9 verfügbar.

2. Referenzvariablen

In obigen Beispielen sind wurzel oder h2s keine Variablen im eigentlichen Sinne, sondern Referenzen(!) auf die entsprechenden Elemente. Das bedeutet, ihre Inhalte sind global verfügbar ... solange man sie innerhalb einer Funktion nicht mit dem Schlüsselwort var als privat deklariert! Das könnt ihr auch sehr gut an folgendem Code sehen.

function setStart()
{
  // Das hier funktioniert
  rahmen     = document.getElementById ('rahmen');
  // Das nicht!
  var rahmen = document.getElementById ('rahmen');
  showNodes();
}

function showNodes()
{
  absaetze = rahmen.getElementsByTagName('p');
  alert (absaetze.length);
}

<div id="rahmen">
  <p>Und hier kommt der Fließtext.</p>
  <p>Und hier auch</p>
</div>
<p>
  <a href="#" onclick="setStart();">Zeigen</a>
</p>

3. Varianten

Man kann die entsprechenden Elemente einzeln über Referenzen, aber auch direkt ansteuern. Da lässt uns JavaScript einige Freiheiten. Daher sind die beiden folgenden Beispiele in ihrem Ergebnis identisch:

// Variante 1
r = document.getElementById ('rahmen');
p = r.getElementsByTagName('p');

// Variante 2
p = document.getElementById ('rahmen').getElementsByTagName('p');

Ein Hinweis

Man kann das zwar bis zum Erbrechen in die Länge ziehen, sollte es aber tunlichst vermeiden, da die Übersichtlichkeit doch stark darunter leidet.

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