Javascript - Zoek elementen op hun ID's

Deze tip laat zien hoe je naar elementen zoekt op basis van hun ID. Dat is wanneer de laatste overeenkomen met een reguliere expressie.

Kwestie

U kent de methode getElementById (id) al die wordt gebruikt om het element terug te geven dat is gerelateerd aan een bepaalde ID (aangezien ID noodzakelijkerwijs uniek is) en de methode getElementsByTagName (tagName) die een array retourneert die alle elementen met de vermelde tag bevat.

Wel zijn er enkele gevallen waarin deze oplossingen niet genoeg zijn.

Bijvoorbeeld: u heeft vierkanten op uw site: wanneer de gebruiker op een knop klikt, verandert elk vierkant van grootte, elk met een nieuw eigen formaat. U moet dus een lijst met hun ID's hebben om ze te beheren. Er zijn twee oplossingen beschikbaar:

Telkens wanneer u een vierkant toevoegt, verhoogt u handmatig een lijst met ID's.

U hebt een lus die het document doorzoekt om de vierkanten te vinden, dus past de methode rechtstreeks op de code. Maar hoe haal je alle ID's terug, wetende dat je niet precies het aantal vakjes kent (geen loop) en je weet niet waar ze zich op de pagina bevinden?

Oplossing

We zullen de methode getElementByRegexId gebruiken. Deze methode heeft twee parameters, namelijk:

De reguliere expressie die overeenkomt met de ID's.

[Fac] De naam van de tag die moet worden doorzocht. Als niets wordt aangegeven, worden alle tags in aanmerking genomen.

Het principe is simpel: we doorzoeken de elementen die zijn opgehaald door getElementsByTagName, testen de ID's en alles dat overeenkomt met de reguliere expressie, wordt toegevoegd aan een tabel:

 functie getElementsByRegexId (regexpParam, tagParam) {// Si aucun nom de balise n'est spécifié, on cherche sur toutes les balises tagParam = (tagParam === undefined)? '*': tagParam; var elementsTable = new Array (); voor (var i = 0; i 
Voorbeeld:
 var divCarres = getElementsByRegexId (/ _ carre. * /, "div"); var tousLesCarres = getElementsByRegexId (/ _ carre. * /);