Niveau Niveau débutant

L'API classList

Articlejavascript

Publié par le (47180 lectures)

class javascript classlist

Une petite fonctionnalité qui peut faire beaucoup de différence sur le temps de développement : classList est une des propriétés d'un élément HTML (accessibles en JavaScript) assez méconnue. Et pour cause, elle n'est supportée qu'à partir d'Internet Explorer 10, ce qui a longtemps freiné son utilisation (des scripts aidant les versions antérieures sont mentionnés au bas de cet article).

L'API classList permet d'accéder à la liste des classes appliquées à un élément HTML, de manière simple et efficace via les méthodes suivantes :

  • length : retourne le nombre de classes
  • add(nom_classe) : ajoute une classe
  • contains(nom_classe) : retourne true si une classe est présente et false sinon
  • remove(nom_classe) : supprime une classe
  • toggle(nom_classe) : ajoute ou supprime une classe, si elle est présente initialement ou non
  • toString() : retourne la chaîne de texte complète

Ceci autorise des changements dynamiques, de style principalement, dans le document, en appliquant ou non des classes, à la volée, par exemple suite à des actions de l'utilisateur. En revanche, cela suppose d'avoir au préalable sélectionné un élément, entre autres grâce aux méthodes DOM de sélection telles que document.getElementById, document.getElementsByClassName, ou des fonctions plus récentes telles que querySelector et querySelectorAll de l'API Selectors.

<div id="monid"></div>

<script>
var monelement = document.getElementById('monid');
monelement.classList.add('maclasse');
monelement.classList.remove('maclasse');
monelement.classList.toggle('maclasse');
monelement.classList.contains('maclasse');
var nb_classes = monelement.classList.length;
</script>

Voir la démonstration n°1 

On peut aller au-delà du simple style graphique, et s'en servir pour catégoriser des éléments (l'attribut class est conçu pour cela !).

// Sélection grâce à querySelectorAll
var liens = document.querySelectorAll('#galerie a');
for (var i = 0; i < liens.length; i++) {
  liens[i].onclick = function() {
    this.classList.toggle('hopla');
    return false;
  }
};

// Comptage
document.getElementById('btnlength').onclick = function() {
  alert(document.querySelectorAll('#galerie a.hopla').length);
};

Consultez la source du document pour découvrir les fonctions appliquées.

Voir la démonstration n°2 

En combinant ces quelques techniques, il devient inutile de charger la bibliothèque jQuery (qui dispose de ses propres méthodes addClasstoggleClassremoveClass, etc) pour effectuer ces actions.

Tableau des compatibilités

Navigateurs Versions
Internet Explorer Internet Explorer 10
Firefox Firefox 3.6
Chrome Chrome 8
Chrome Mobile 18 (Android 4+)
Opera Opera 11.5
Opera Mobile 11.1
Safari

Safari 5.1
Safari Mobile 5.0

Android Browser Android Browser 3.0
Blackberry Logo Blackberry Browser 7

Pour les plus anciens navigateurs, il existe deux polyfills JavaScript : classList.js et classList shim.

Commentaires

Une alternative aux addClass(), toggleClass() et autres fonctions similaires sous jQuery ? Sauf qu'avec cette bibliothèque tout est compatible. Evidemment ça évite de charger une bibliothèque...

Malheureusement cette fonctionnalité reste inutile pour l'instant, XP est présent sur plus d'un tiers des ordinateur, il est impensable de construire un site en zappant les utilisateurs bloqués sur IE8.

Tout dépend du public. S'il s'agit de concevoir une application dotée d'autres fonctionnalités HTML5 qui ne tourneront de toute façon pas sur IE8 (comme c'est le cas de plus en plus, et comme Google va le considérer à partir de mi-novembre pour une bonne partie de ses services) alors classList est un raccourci agréable.
Sinon, les polyfills JavaScript sont intéressants : chargés de façon optimale uniquement pour les vieux navigateurs, ils permettent de faire fonctionner classList en conservant la syntaxe native (et donc disponible directement sur les navigateurs récents ou futurs par anticipation). En procédant ainsi, on a un petit gain de temps en développement tout de même.

De plus, plusieurs polyfills JS sont disponibles, et peuvent très bien être réservés à IE 9 et inférieur via les commentaires conditionnels (pour éviter une requête HTTP inutile sur les "bons" navigateurs). "classlist polyfill" sur Google donne tout un tas de résultats :)