• JavaScript
JavaScript CSS Selector Engines

Een CSS selector engine zorgt ervoor dat je eenvoudig één of meerdere DOM elementen kunt opvragen. In een stylesheet gebruik je bijvoorbeeld #content om het element met de id “content” te stylen. In JavaScript kun je het element opvragen met:

document.getElementById('content')


Wil je bijvoorbeeld alle lijst-elementen (<li>) met de class “item” opvragen, dan zou het handig zijn als je het volgende kunt doen:

getElementsBySelector('li.item')

Om dit voor elkaar te krijgen, zijn er diverse CSS selector engines geschreven.

var content = document.getElementById('content');

var items = getElementsBySelector('li.item'); 

JavaScript Libraries

De CSS selector engine (CSE) is meestal een onderdeel van een JavaScript library, zoals jQuery gebruik maakt van de Sizzle engine. Maar de CSE kan ook los van de library worden gebruikt. Je kunt het bijvoorbeeld gebruiken om een eigen library en framework op te zetten.

De eerste CSE’s

jQuery maakte veel JavaScript programmeurs bekend met dit principe (elementen opvragen volgens de CSS methode). Toch waren er al voorlopers op jQuery, zoals:

// example of cssQuery
// get all links inside the div with id 'nav' 
var links = cssQuery('div#nav a'); 

Huidige CSE’s

Het leek erop dat Sizzle dé CSE zou gaan worden, aangezien deze gebruikt werd door een aantal bekende frameworks, namelijk jQuery, Prototype en Dojo. MooTools heeft gekozen om een eigen CSE te blijven gebruiken en Sizzle niet op te nemen in het framework. Verder zijn er op internet diverse claims te vinden over CSE’s die sneller en beter zijn dan Sizzle. Hier een overzicht van moderne CSS selector engines:

// example of Peppy
// get all divs containing the class 'example'
var examples = Peppy.query('div.example'); 

Meer artikelen over CSE’s

Gerelateerde artikelen

Op dit artikel kan niet worden gereageerd.