HTML5 : L’API JavaScript « Selectors »

 Article modifié dernièrement le 8 Juil 2010 @ 0 h 50 min

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 ~= HTMLCSSJS 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

Utilisation d’un framework JavaScript tel jQuery

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

Utilisation d’un framework JavaScript tel jQuery

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/

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Philippe @ HTML5 Débloque-notes 8 juillet 2010, 8 08

    Je sens que je vais tweeter là…

  • Mimie 8 juillet 2010, 9 09

    Tu as une démangeaison ? 🙂
    Le lien vers ton site ne fonctionne pas, soit dit au passage ^^

  • Philippe @ HTML5 Débloque-notes 8 juillet 2010, 10 10

    C’est bon je me suis gratté. 😉
    Tu as corrigé le lien semble t-il…

  • FGRibreau 9 juillet 2010, 10 10

    Sachez que jQuery, via sizzle, détecte la présence de queryselector et dans ce cas le prefère à la place de son propre algorithme. Bien entendu l’utilisation de jQuery ajoute quelques appels supplémentaires mais l’écart de perf est minime.

  • Mimie 9 juillet 2010, 11 11

    Je ne savais pas que Sizzle était l’implémentation des sélecteurs CSS dans jQuery. Heureux d’apprendre qu’il utilise les méthodes natives querySelector() et querySelectorAll() sur les navigateurs récents.
    Merci de cette précision.

  • FGRibreau 9 juillet 2010, 12 12

    La ligne en question:
    http://github.com/jeresig/sizzle/blob/master/sizzle.js#L919

    Donc en fait, Sizzle appel querySelectorAll (si disponible) qu’il retourne dans une array.

Article suivant:

Article précédent:

Share This