Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 45
Zur Übersicht

45. W3C-DOM: getElementsByTagName / getElementsByName (22.12.2000)

Browser, die das W3C-DOM zumindest ansatzweise implementiert haben, stellen die Methoden document.getElementsByTagName und document.getElementsByName zur Verfügung. Damit lassen sich Taggruppen (z. B. alle Absätze, also P-Tags) oder mehrere mit einem einheitlichen NAME-Attribut versehene Tags komfortabel via Scripting behandeln.

Zum Ansprechen der gewünschten Elemente legt man zweckmäßigerweise separate Variablen an:
      var absaetze=document.getElementsByTagName("P");
      var auswahl=document.getElementsByName("Frage1");
      
Die Variable absaetze repräsentiert eine Collection, d. h. ein Array, welches die Objektreferenzen aller P-Tags des Dokuments enthält. Analog stehen in auswahl alle Objekte mit dem Attribut NAME="Frage1" bereit. Die Zählung der Array-Elemente beginnt wie üblich bei 0 und endet bei arrayvariable.length-1. Sollen nun die CSS-Eigenschaften Color sowie Background-Color des ersten Absatzes im Dokument verändert werden, kann das 0. Array-Element wie folgt angesprochen werden:
      absaetze[0].style.color="#FF0000";
      absaetze[0].style.backgroundColor="#FFFFCC";
      
Im Beispiel 45a wird auf dieser Basis gezeigt, wie sich Absatzeigenschaften "on-the-fly" manipulieren lassen (Steuerung über Auswahllisten).

Wann ist nun die mehrfache Vergabe eines Namens sinnvoll? Naheliegend ist dieses Vorgehen bei Radio-Buttons (Input-Felder vom TYPE="radio"). Zur Demonstration dient Beispiel 45b, welches ein kleines Frage-Antwort-Spiel präsentiert. Jeder Frage sind vier Antwortmöglichkeiten zugeordnet, wobei die zugehörigen Radio-Button die gleichen Namen tragen (Frage1 ... Frage4).

Die Beispiele funktionieren im IE 5.x und Netscape 6 / Mozilla. Opera 5 kennt document.getElementsByTagName nicht, meint jedoch document.getElementsByName zu kennen. Im Test mit Beispiel 45b passierte jedoch nichts, sodass die vorgeschaltete Abfrage Opera ausschließt, wenn nicht die Zeichenkette Opera 5. gefunden wird (in der Version 5.11 sind mittlerweile beide Methoden funktionsfähig implementiert).
Opera ist – zumindest vor Version 5.11 – kaum eine Alternative für DHTML-Anwendungen auf der Basis des W3C-DOMs. So kann u. a. auch nicht auf document.documentElement zugegriffen werden und die CSS-Eigenschaft object.style.backgroundColor verweigert bis Version 5.12 die Zusammenarbeit (ab 6.0 endlich implementiert). Immerhin funktioniert document.getElementById ab Version 5.