Para las clases, puede utilizar document.querySelectorAll() junto con los selectores de css, como este:
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>
Con los nombres de clases, recuerde que usted puede especificar TODOS los nombres de clases (a veces es útil para localizar un elemento si hay otros elementos que contienen parte de la classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
También tenga en cuenta que document.querySelectorAll() devuelve una colección, no una cadena - que es por qué es necesario el uso de la [0] la notación para elegir el primer elemento que se devuelve en la colección.
El uso de getElementsByClassName() es la misma idea - de nuevo, devuelve una colección y se debe utilizar el [0] la notación para obtener el primer elemento (por lo general, si sólo uno es devuelto), o un forEach() bucle para elegir el elemento deseado basado en otros criterios.
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>
