Pour les classes, vous pouvez utiliser document.querySelectorAll() avec les sélecteurs css, comme ceci:
document.querySelector('button').addEventListener('click', () => {
document.querySelectorAll('.cake')[0].style.display = 'none';
});
<div class="cake forest carousel">Some content I want to hide.</div>
<button>Hide content</button>
Avec les noms de classe, n'oubliez pas que vous pouvez spécifier TOUS les noms de classe (c'est parfois utile pour repérer un élément si il y a d'autres éléments qui contiennent une partie de la classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Notez également que document.querySelectorAll() renvoie une collection, pas une chaîne de caractères, c'est pourquoi il est nécessaire d'utiliser la [0] la notation de choisir le premier élément est retourné dans la collection.
À l'aide de getElementsByClassName() c'est la même idée - encore une fois, il renvoie une collection et il faut soit utiliser l' [0] la notation pour obtenir le premier élément (généralement, si un seul est retourné), ou un forEach() boucle pour choisir l'élément souhaité sur la base d'autres critères.
document.querySelector('button').addEventListener('click', () => {
document.getElementsByClassName('cake forest')[0].style.display = 'none';
});
<div class="cake forest carousel">This div has classes cake, forest and carousel</div>
<div class="cake">This div only has class cake</div>
<button>Hide divs with classes cake AND forest</button>
