Para as aulas, você pode usar document.querySelectorAll() junto com seletores 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>
Com o nome de suas classes, lembre-se que você pode especificar TODOS os nomes de classes (que, por vezes, é útil para identificar um elemento se há outros elementos que contêm parte da classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Observe também que document.querySelectorAll() retorna uma coleção, e não uma seqüência de caracteres que é por isso que é necessário para usar o [0] notação para escolher o primeiro elemento retornado na coleção.
Usando getElementsByClassName() é a mesma idéia - novamente, ele retorna uma coleção e deve-se usar a [0] notação para obter o primeiro elemento (geralmente se apenas um for devolvido), ou uma forEach() loop para escolher o elemento desejado com base em outros critérios.
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>
