L'API 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 addClass, toggleClass, removeClass, etc) pour effectuer ces actions.

Tableau des compatibilités

Navigateurs	Versions
	Internet Explorer 10
	Firefox 3.6
	Chrome 8 Chrome Mobile 18 (Android 4+)
	Opera 11.5 Opera Mobile 11.1
	Safari 5.1 Safari Mobile 5.0
	Android Browser 3.0
	Blackberry Browser 7

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