Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 1 - Eine Liste auslesen

1. Die Abschnitte

2. Das erste Ziel

Nun wollen wir als Erstes mal die einzelnen Texte aus der zweiten Liste im Hauptbereich auslesen, also aus dem <div id="content">. Das machen wir in der Methode getList der Konstruktorfunktion manipulateDOM. Und diese Inhalte benötigen wir dann für das Beispiel im nächsten Abschnitt.

3. Der Zugriff

Da wir, wie schon gesagt, die zweite, oder genauer gesagt, die letzte Liste auslesen wollen, gehen wir schrittweise vor. Vom Prinzip her muss man sich das so vorstellen: 


function getList()
{
  // div ermitteln
  var div = document.getElementById('content');
  // alle Listen erfassen, Ergebnis wird in einem Array gespeichert
  var uls = div.getElementsByTagName('ul');
  // Letztes Element des Arrays nehmen
  var ul = uls[(uls.length - 1)];
  // Alle Einzelpunkte erfassen
  var li = ul.getElementsByTagName('li');
}

Ein wichtiger Hinweis!

Alle benötigten Variablen wurden mit dem Schlüsselwort var initialisiert. Das bedeutet in diesem Fall, dass die Variablen nur innerhalb der jeweiligen Methode zur Verfügung stehen. Warum ich das mache? Ganz einfach, weil ich solche Variablennamen wie ul oder li später noch einmal in einer anderen Methode benutze. Und so verhindere ich, dass die sich gegenseitig in die Quere kommen könnten. Bei JavaScript und der unterschiedlichen Implementierung in die einzelnen Browser kann man nicht vorsichtig genug sein!

Wichtig wäre in diesem Zusammenhang noch var ul = uls[(uls.length - 1)];. Also, JavaScript speichert in so einem Fall alle gefundenen Elemente in einem Array. Da wir davon bekanntlich die letzte haben wollen, nehmen wir die Länge minus eins ([(uls.length - 1)]) und haben den entsprechenden numerischen Index, um darauf zugreifen zu können. Und bitte arbeitet hier sauber mit den einfachen Klammern.

4. Texte erfassen

Wir haben also ein Array mit allen Unterelementen der letzten Liste. Jetzt brauchen wir nichts mehr zu tun, als dieses zu durchlaufen und uns die Inhalte zu holen. Dazu muss die Methode getList nur um folgenden Code ergänzt werden. 


function getList()
{
  ...
  texte = new Array ();
  for (var i = 0; i < li.length; i++)
  {
    texte.push (li[i].firstChild.data);
  }    
}

Erläuterung

Zunächst erzeugen wir mit texte = new Array (); ein Array-Objekt (siehe auch hier). Aber diesmal verwenden wir kein var. Wieso? Ganz einfach, weil wir dieses Array in einer anderen Methode benötigen. Sie ist somit innerhalb der kompletten Konstruktorfunktion öffentlich zugängig.

Was innerhalb der Schleife passiert, ist auch schnell erklärt. texte.push hängt die einzelnen Werte in das bis dato leere Array ein. Und die entsprechenden Texte der Listenelemente holen wir uns mit li[i].firstChild.data.

Bei li[i] handelt es sich also um den jeweiligen aktuellen Punkt der Liste. firstChild ist das erste Kindelelement, in diesem Fall also ein Textknoten. Und data erfaßt dessen Inhalt. Warum ich hier kein nodeValue genommen habe? Nun Letzteres kann sich auch auf die Inhalte von Attributknoten beziehen, hier wollen wir aber ausschließlich den von Textknoten erfassen. Und data macht nichts anderes.

5. Das Ergebnis

... existiert bis hierhin natürlich nur in dem Array texte. Um zu überprüfen, ob ihr es richtig gemacht habt, reicht nach der for-Schleife ein simples alert (texte); aus. Probiert es mal.

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