HTML5 : L’API JavaScript « Selectors »

HTML5

© http://geekfault.org

La nouvelle spécification HTML5 dictée par le World Wide Web Consortium (W3C) a pris le pari que l’avenir du Web est le langage JavaScript. Cette nouvelle version du langage à la base de tout site Web, HTML, standardise une série d’API JavaScript qui vont pouvoir être implémentées par tous les navigateurs digne de ce nom, en voici la liste :

• Selectors
• Timers
• Workers et Messaging
• Web Storage
• Offline Web Application
• Geolocation
• WebSocket
• Web SQL Database
• Drag’n'drop
• ContentEditable

L’on a cru il y a quelques années que le langage JavaScript était mort et enterré, pourtant il a été ressuscité récemment avec l’utilisation d’Ajax dans les applications Web, il va à présent s’imposer comme un langage de premier ordre grâce à HTML5.

Le but ultime de ces nouvelles spécifications est de faire en sorte que les applications Web de demain égaleront au niveau finition et performance les applications de bureau grâce au trio tonitruant :

HTML5 ~= HTML + CSS + JS APIs

Selectors

Je vais m’attarder sur l’API qui sort du lot d’après moi, les sélecteurs CSS, qui sont habituellement utilisés pour appliquer des styles aux éléments HTML mais aussi pour retrouver facilement un ou plusieurs éléments.

Jusqu’à présent seules les recherches d’éléments par identifiant, getElementById(), et par nom de balise, getElementsByTagName(), étaient possible de façon native par le biais de l’objet JavaScript « document ». HTML5 rajoute la possibilité de rechercher à présent les éléments par nom de classe CSS avec la méthode getElementsByClassName() :

Utilisation native

var el = document.getElementById('header');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();

Utilisation d’un framework JavaScript tel jQuery

var el = $('#header');
el.focus();
var els = $('div');
els.index(0).focus();
var els = $('.section');
els.index(0).focus();

Mais dès que la recherche d’éléments devient un peu plus complexe, comme rechercher les lignes impair d’un tableau ou rechercher toutes les cellules des tableaux ayant comme classe CSS ‘test’, les méthodes getElementById() et getElementsByTagName() ne suffisent plus (ou un algorithme assez complexe est à mettre en oeuvre pour y parvenir).

Dès aujourd’hui, grâce à cette API, il est possible d’utiliser la méthode document.querySelector() qui fonctionne nativement sur tous les navigateurs récents, elle supporte même la nouvelle norme CSS3.

• document.querySelector() retourne le premier élément trouvé correspondant au sélecteur
• document.querySelectorAll() va nous retourner la collection complète

Utilisation native

var el = document.querySelector('#nav ul li');
var els = document.querySelectorAll('ul li:nth-child(even)');
var els = document.querySelectorAll('form.test > tr > td');

Utilisation d’un framework JavaScript tel jQuery

var el = $('#nav ul li').item(0);
var els = $('ul li:nth-child(even)');
var els = $('form.test > tr > td');

Conclusion

L’utilisation native des sélecteurs CSS proposée par HTML5 ne nous simplifie pas seulement la vie, elle permet aussi de gagner du temps car la différence est flagrante entre l’utilisation d’un framework JS qui proposent leur propre implémentation des sélecteurs CSS, et l’utilisation d’HTML5 avec les méthodes querySelector() et querySelectorAll(), constatez par vous même en lançant Slick Speed dans votre navigateur.

Spécifications W3C détaillées : http://www.w3.org/TR/selectors-api/

Cet article a été écrit par :

Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• Menu fixe mais flottant selon la scrollbar (JS + CSS)
• Taglibs JSP pour optimiser le chargement de vos pages
• Tétris remis au goût du jour grâce à HTML5
• Comment n’imprimer qu’une partie de vos pages Web
• Appliquer un style journal aux textes de votre site Web