StyleAssistant |
| Startseite |
 |
| Screenshot |
|
| Kurzanleitung |
|
| Download |
|
| Kurse & Infos |
|
| >Tipps & Tricks< |
|
| Unterstützer |
|
| TMXtensions |
|
| ?Freeware! |
|
| About TM |
|
Stand: 07.12.2002 |
Tipps & Tricks – Tipp 100
|
 |
 |
 |
|
1 .
getElementsByClassName() im Eigenbau (07.12.2002)
Aus guten Fragen ergeben sich oft interessante Antworten. Im SELFHTML-Forum wurde kürzlich gefragt, wie man alle Elemente erfassen kann, denen eine bestimmte CSS-Klasse zugewiesen wurde. Da es dafür keine vorgefertigte DOM-Methode gibt, lag die Idee einer JavaScript-Funktion mit dem Namen getElementsByClassName() nahe.
Alle benötigten Zutaten wurden hier bereits beschrieben (vgl. Tipp 41). Zum Ziel führt die Abfrage der Eigenschaft className über alle Elemente eines Dokuments hinweg. Der IE liefert mit document.all Referenzen auf alle Elemente, während das unter Netscape 6+ / Mozilla und neuerdings auch unter Opera 7 mit Hilfe von
document.getElementsByTagName("*") erreicht werden kann.
Der folgenden Funktion wird ein Klassenname übergeben anhand dessen ein Objekt-Array gefüllt (ret_obj) und an die aufrufende Instanz zurück gegeben wird.
function getElementsByClassName(class_name)
{
var all_obj,ret_obj=new Array(),j=0,teststr;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)
all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++)
{
if(all_obj[i].className.indexOf(class_name)!=-1)
{
teststr=","+all_obj[i].className.split(" ").join(",")+",";
if(teststr.indexOf(","+class_name+",")!=-1)
{
ret_obj[j]=all_obj[i];
j++;
}
}
}
return ret_obj;
}
Im Beispiel 100 kommt diese Funktion zur Anwendung, um – analog zum eingangs genannten Tipp 41 – dynamisch Klassen von Absätzen auszutauschen. Die vorgestellte Funktion ist flexibel innerhalb von anderen Funktionen einsetzbar. Man kann auch direkt die Anzahl von Elementen mit einer bestimmten Klasse über getElementsByClassName("klasse").length abfragen, was ebenfalls in diesem Beispiel gezeigt wird. |
|
 |
|
 |