Manipuler les classes avec `className` serait bien peu pratique ! Prends
l'élément suivant :

```html
<button id="btn1" class="btn btn-primary active">Bouton actif</button>
```
On pourrait avoir les styles suivants dans l'en-tête HTML :
```html
<style>
.btn { padding: 10px; border-radius: 3px; }
.btn-primary { background: #aaf; border: 1px solid #aaf; }
.btn-secondary { background: #aff; border: 1px solid #aff; }
.active { font-weight: bold; }
</style>
```

Comment faire si je veux enlever `active`, ou remplacer `btn-primary` par `btn-secondary` ?
Cela m'oblige à faire des manipulations potentiellement complexes sur la chaîne assignée à
`className`.

<blockquote>
La propriété <code>classList</code> contient non pas une chaîne, mais une <em>liste</em> des classes.
Ce n'est pas un simple tableau, mais un objet renfermant un tableau, et qui offre les méthodes :
<ul>
  <li><code>add</code> : <em>ajouter</em> une classe</li>
  <li><code>remove</code> : <em>supprimer</em> une classe</li>
  <li><code>toggle</code> : <em>changer</em> l'existence d'une classe</li>
  <li><code>contains</code> : <em>vérifier</em> l'existence d'une classe</li>
</ul>
Quand on manipule <code>className</code>, <code>classList</code> est mise à jour automatiquement, et vice-versa.
</blockquote>

Exemple avec le bouton ci-dessus (regarde le résultat avant et après que tu aies inséré le code ci-dessous) :
```javascript
var button = document.getElementById('btn1');
button.classList.remove('btn-primary');
button.classList.add('btn-secondary');
button.classList.toggle('active');
if(! button.classList.contains('active')) {
  button.innerHTML = 'Bouton inactif';
}
console.dir(button);
```
