Heim  >  Artikel  >  Web-Frontend  >  Empfehlen Sie gekapselte getElementsByClassName-Methoden_Javascript-Kenntnisse

Empfehlen Sie gekapselte getElementsByClassName-Methoden_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:29:261171Durchsuche

Wir wissen, dass uns natives JS die Methode getElementsByClassName zur Verfügung stellt, mit der wir eine Sammlung von Knoten erhalten können, die eine bestimmte Klasse enthalten. Beachten Sie, dass es sich um eine Sammlung handelt, das heißt, diese Funktion gibt ein Array zurück.

Der IE unterstützt diese Methode jedoch nicht, aber diese Methode ist sehr praktisch, daher müssen wir eine solche Funktion speziell für den IE implementieren.

Code kopieren Der Code lautet wie folgt:

Funktion getElementsByClassName(oEle,sClass,sEle){
if(oEle.getElementsByClassName){
Geben Sie oEle.getElementsByClassName(sClass);
zurück }else{
var aEle=oEle.getElementsByTagName(sEle || '*'),
reg=new RegExp('(^|\s)' sClass '($|\s)'),
arr=[],
i=0,
iLen=aEle.length;

for(; i If(reg.test(aEle[i].className)){
arr.push(aEle[i]);
}
}
Rückkehr arr;
}
}

Anwendung:

Code kopieren Der Code lautet wie folgt:

//Erste Methode: Wählen Sie alle div-Elemente mit der Klasse box_box unter dem Dokument
aus getElementsByClassName(document,'box_box','div')[0].style.background='yellow';

//Zweite Option: Wählen Sie alle div-Elemente mit der Klasse box-box unter dem Dokument aus
getElementsByClassName(document,'box-box','div')[0].style.background='yellow';

//Die dritte Methode: Wählen Sie alle Klassen unter dem Dokument als Box-Box-Elemente aus
getElementsByClassName(document,'box-box')[0].style.background='yellow';

oEle und sClass sind erforderlich, sEle ist optional.

Es gibt keine Probleme mit horizontalen Linien oder Unterstreichungen in sClass, zum Beispiel: box-box box_box; aber wenn es sich um andere Sonderzeichen handelt, kann es Probleme geben, wie zum Beispiel: box$box... Natürlich können Sie das Fügen Sie es selbst hinzu. Passen Sie Sonderzeichen an, z. B.: box\$box…

Kompatibilität: Persönlicher Test ie6

Freunde, Sie werden es wissen, nachdem Sie es selbst verwendet haben. Bitte verbreiten Sie es an andere Freunde.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn