DOM-Manipulation JavaScript - Praxistutorial 1 - Eine Liste ergänzen Teil 1

1. Die Abschnitte

2. Jetzt wird es ein wenig verrückt

Im letzten Abschnitt haben wir uns bekanntlicherweise die Texte der letzten Liste aus unserem Hauptbereich geholt. Jetzt wollen wir die in unser linkes Navigationsmenü integrieren. Dazu nutzen wir die Methode setList. Um denn nun auch die benötigte Anzahl von Links zu bekommen, erstellen wir einfach mal ein entsprechendes Array mit derselben Anzahl von Einträgen, die das Array text hat. Ist nicht sehr schön, nicht sehr fein, aber für dieses Tutorial sollte es reichen. Zumal es hier um wichtigere Dinge geht.


function setList()
{
  var links = new Array();
  links[0]  = 'http://www.peterkropff.de';
  links[1]  = 'http://www.php-resource.de';
  links[2]  = 'http://de.selfhtml.org/';
}

3. Die Überprüfung

Da das Array texte erst erstellt wird, wenn wir die Methode getList aufrufen, müssen wir zuerst abklären, ob es überhaupt vorhanden ist. Denn sonst hauen uns die Browser eine Fehlermeldung um die Ohren. Und alles Weitere kommt bitteschön in diese Bedingung! Also geschweifte Klammern setzen.


function setList()
{
  ...
  if ('undefined' != typeof texte)
}

4. Die Linkliste erfassen

... könnte man ganz einfach machen, wenn es da nicht diese idiotische Spezifikation gäbe, dass Umbrüche bereits Textknoten sind (siehe Punkt 3) und obendrein von Browsern unterschiedlich implementiert werden. Also muss man (mal wieder) einen Umweg gehen.


var ul = document.getElementById('menue').firstChild;
if (3 == ul.nodeType)
{
  ul = ul.nextSibling;
}

Erläuterung

Mit var ul = document.getElementById('menue').firstChild; lesen wir das erste Kindelement aus und speichern es in einer lokalen Variablen ab (siehe vorherigen Abschnitt). Da es sich in diesem Fall aber über einen Textknoten/Zeilenumbruch handelt, muss eine zusätzliche Überprüfung vorgenommen werden.

Und das geschieht mit if (3 == ul.nodeType). Handelt es sich um den Internet Explorer (in den Versionen 6 - 8), so ignoriert der den Zeilenumbruch und erfasst den nächsten Elementknoten, also die Liste. Andere Browser tun das nicht. Also überprüfen wir mit if (3 == ul.nodeType) (siehe Link), ob es sich dabei um einen Text- oder Elementknoten handelt.

Firefox und andere W3C-konforme Browser geben hier eine 3 zurück, da wir es mit einem Zeilenumbruch/Textknoten zu tun haben. Also wählen wir in dem Fall das nächste Element mit ul = ul.nextSibling; aus. Und das ist unsere gewünschte Liste.

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