Javascript - Suche nach Elementen anhand ihrer IDs

In diesem Tipp erfahren Sie, wie Sie anhand ihrer ID nach Elementen suchen. In diesem Fall stimmen die letzteren mit einem regulären Ausdruck überein.

Problem

Sie kennen bereits die Methode getElementById (id), mit der das Element zurückgegeben wird, das sich auf eine bestimmte ID bezieht (da ID unbedingt eindeutig ist), und die Methode getElementsByTagName (tagName), die ein Array zurückgibt, das alle Elemente mit dem angegebenen Tag enthält.

Nun, es gibt Fälle, in denen diese Lösungen nicht ausreichen.

Beispiel: Auf Ihrer Website befinden sich Quadrate: Wenn der Benutzer auf eine Schaltfläche klickt, ändert sich die Größe jedes Quadrats mit einer neuen Größe für sich. Sie benötigen daher eine Liste ihrer IDs, um sie verwalten zu können. Zwei Lösungen stehen zur Verfügung:

Jedes Mal, wenn Sie ein Quadrat hinzufügen, erhöhen Sie manuell eine Liste von IDs.

Sie haben eine Schleife, die das Dokument durchsucht, um die Quadrate zu finden, sodass die Methode direkt in den Code passt. Aber wie kann man alle IDs abrufen, wenn man weiß, dass man nicht die genaue Anzahl der Quadrate kennt (keine Schleife) und nicht weiß, wo sie sich auf der Seite befinden?

Lösung

Wir werden die Methode getElementByRegexId verwenden. Diese Methode hat zwei Parameter, nämlich:

Der reguläre Ausdruck, der mit den IDs übereinstimmt.

[Fac] Der Name des zu durchsuchenden Tags. Wenn nichts angegeben ist, werden alle Tags berücksichtigt.

Das Prinzip ist einfach: Wir durchsuchen die von getElementsByTagName abgerufenen Elemente, testen die IDs und alles, was mit dem regulären Ausdruck übereinstimmt, wird zu einer Tabelle hinzugefügt:

 function getElementsByRegexId (regexpParam, tagParam) {// Gibt es eine Balise, die nicht spezifiziert werden kann? tagParam = (tagParam === undefined)? '*': tagParam; var elementsTable = new Array (); für (var i = 0; i 

Beispiel:

 var divCarres = getElementsByRegexId (/ _ carre. * /, "div"); var tousLesCarres = getElementsByRegexId (/ _ carre. * /); 

Vorherige Artikel Nächster Artikel

Top-Tipps