HAKUROU L'amour est dans le code

Sélecteur javascript sans jQuery

Sélecteur javascript sans jQuery<br>

Parcourir l'arbre DOM, n'est pas chose aisée en natif javascript, Jquery simplifie les choses mais si on n'utilise que les selecteurs et l'ajax, forcément ça donne une solution un peu lourde pour pas grand chose.

Evidemment il existe des bibliothèques déjà faites telle que Qwery, Sizzle, etc...mais le plus fun est d'apprendre et comprendre ce que l'on fait, et c'est donc dans cette optique que je suis parti à l'aventure de la création d'une bibliothèque de sélecteur.

Le résultat a donné naissance à piou-selector, qui s'efforce de coller au mieux aux selecteurs CSS3, qui accepte des pseudo-classes utilisateur, et se sert de querySelector quand celui-ci est disponible.

Si ça en intéresse certains, j'ai déduit la grammaire suivante afin de coder le parseur:

exp			:= <base> > <exp>
			 | <base> ~ <exp>
			 | <base> + <exp>
			 | <base> <exp>
			 | <base>
base			:= tag<suit>
			: <sup>
suit			:= <sup>
			 | E
sup			:= #ident<suit>
			 | .class<suit>
			 | <pseu><suit>
			 | <attr><suit>
pseu			:= :pseudo
			 | :pseudo(...)
attr			:= [attr]
			 | [attr=value]
			 | [attr*=value]
			 | [attr|=value]
			 | [attr^=value]
			 | [attr$=value]
			 | [attr~=value]

 

L'utilisation reste assez similaire à querySelector et querySelectorAll, en voici quelques exemples:

var elements = piou.selector("#foo bar"); 

var tag = piou.selector("div"); 

var children = piou.selector("li:nth-child(4n+1)");
 

Piou-selector.js est diponible sur mon dépot Github https://github.com/hakurou/piou-selector.