Zelf 'jQuery-achtige' selector-functies maken

Het bekende JavaScript-platform jQuery gebruikt het dollar-teken $ als 'afkorting' voor zaken als document.getElementById(…) en document.getElementsByClassName(…).

Dat werkt prettig. Helaas is jQuery in de loop der tijd een zwaar pakket geworden. Als je alleen bent geïnteresseerd in de handige schrijfwijze voor het selecteren van HTML-elementen, classes en id's, dan is jQuery op zich geschikt, maar sleept het wel veel ballast mee. Je kunt er dan ook voor kiezen om de selector-functies zelf te schrijven. Uiteraard in 'plat' JavaScript.

Op deze pagina's wordt in een paar voorbeelden getoond hoe je dat kunt aanpakken.

Het gebruik van document.getElementById(…) of document.getElementsByClassName(…) is niet altijd de handigste oplossing. Vaak is het handiger om document.querySelector(…) en document.querySelectorAll(…) in te zetten. Dan krijg je precies hetzelfde als wat je met de $-function van jQuery bereikt.

Uitgebreide informatie over document.querySelector(…) en document.querySelectorAll(…) vind je door bijvoorbeeld w33chools.com te doorzoeken met deze termen.

Maak je eigen $-functions
Een eenvoudig gebruik van querySelector(…):
var $ = function(cssRule){
  return document.querySelector(cssRule);
}
 
Een eenvoudig gebruik van querySelectorAll(…):
var $$ = function(cssRule){
  return document.querySelectorAll(cssRule);
}

Zoals je ziet is het allemaal minder spectaculair dan het lijkt. Het enige wat je doet is de naam van standaard JavaScript-functions veranderen in wat anders. Het levert wat gemakkelijker te lezen code op, meer niet.

Voorbeeld: een menu activeren
//.. window listener - Uitvoeren ls de pagina is geladen
window.addEventListener("load", function(){
 
  //.. haal alle navigatie-links op
  var navLinks = $$("nav a");
 
  //.. lus over de navigatie-links
  for(var i=0; i<navLinks.length; i++) {
 
    //.. click listener aan navigatie-link koppelen (muis)
    navLinks[i].addEventListener("click", function(e) {
        //.. Koppel de benodigde actie aan deze link
    });
 
    //.. tik listener aan navigatie-link koppelen (aanraakscherm)
    navLinks[i].addEventListener("touchstart", function(e) {
        //.. Koppel de benodigde actie aan deze link
    });
 } // .. Einde lus over de navigatie-links
});

Bovenstaande is toegepast bij het item Sweepanimaties met CSS.