Conversion JQUERY -> DOM natif / ES5

Première étape

Dans cet article nous allons voir comment substituer les principales fonctions d'accès au DOM de jQuery par celles d'ES5 et du Javascript classique.
Bien sûr l'écriture est moins concise que celle utilisée par jQuery, mais les exemples sont là à titre informatif. Nous verrons dans un prochain article comment encapsuler tout cà pour avoir à la fois la concision d'écriture et la performance, avec une syntaxe très proche de celle de jQuery, bref le beurre et l'argent du beurre.

Les sélecteurs jQUERY

sélecteur ID 

Sans doute le plus simple à remplacer.

// jQuery
$('#myID');

// JavaScript
document.getElementById('myID');

Retour : single Node.

sélecteur Classe

Les classes sont intensivement utilisées dans les développements HTML/CSS avec jQuery, mais là encore la vitesse est dramatiquement faible par rapport à une solution native.

// jQuery
$('.myClass');

// JavaScript
document.getElementsByClassName('myClass');

Retour : HTMLCollection.

sélecteur Tags

Idem que pour le sélecteur de classe sauf que là on sélectionne  tous les tags de même nom.

// jQuery
$('div');

// JavaScript
document.getElementsByTagName('div');

Retour : HTMLCollection.




sélecteur CSS selectors

On doit sans aucun doute les méthodes querySelector et querySelectorAll à jQuery vu l'usage des CSS selectors dans les applications et frameworks basés sur cette librairie. 

document.querySelector('') renvoie le premier Node d'une NodeList, quelque soit le nombre d'objets Node trouvés. document.querySelectorAll('') retourne toujours une NodeList.

/*
 * Don't use querySelector or querySelectorAll for
 * selecting classes, tagname or Id but for 
 * complexe selectors!
 */

// Grab the last list Node of .someList unordered list
document.querySelector('ul.someList li:last-child');

// Grab some data-* attribute
document.querySelectorAll('[data-toggle]');

Retour : Node ou NodeList.

Manipuler les classes CSS

Manipuler les classes css d'un ou de plusieurs éléments est chose courante avec jQuery. On peut désormais effectuer ces manipulations nativement à l'aide de l'objet classList, qui se montre bien sûr bien plus rapide que l'implémentation jQuery.

Add class

Ajouter une classe à un ou plusieurs éléments.

// jQuery
$('div').addClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.add('myClass');

Remove class

Enlever une classe à un ou plusieurs éléments.

// jQuery
$('div').removeClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.remove('myClass');

Toggle class

Ajouter/supprimer une classe selon sa présence ou non.

// jQuery
$('div').toggleClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.toggle('myClass');




Has Class

Détermine si un élément possède une classe donnée.

// jQuery
$('#mydiv').hasClass('myClass');

// JavaScript
var div = document.getElementById('#mydiv');
div.classList.contains('myClass');




Manipuler les styles CSS

La méthode css() de jQuery est elle aussi très pratique, mais bien sûr bien plus lente qu'en natif.

// jQuery
$(elem).css({
  "background" : "#F60",
  "color" : "#FFF"
});

// JavaScript
var elem = document.querySelector(elem);
elem.style.background = '#F60';
elem.style.color = '#FFF';

Conclusion

Pour ceux qui n'appréhendent Javascript que par le biais de jQuery, il me paraissait intéressant de leur montrer comment écrire des fonctionnalités similaires en natif, et donc en fait, ce qui se cache un peu derrière cette bibliothèque.

Dans le prochain article je vais commencer à vous décrire une bibliothèque personnelle - Q.lib.js - (Q pour Quick) permettant d'utiliser une syntaxe quasi identique à celle de jQuery au niveau des méthodes mais évidemment beaucoup plus performante.