Per le classi, è possibile utilizzare document.querySelectorAll() insieme con i selettori css, come questo:
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 nomi di classi, ricordate che è possibile specificare TUTTI i nomi di classi (a volte è utile per individuare un elemento se ci sono altri elementi che contengono parte del classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Anche notare che document.querySelectorAll() restituisce una collezione, non una stringa, che è il motivo per cui è necessario utilizzare il [0] notazione per scegliere il primo elemento restituito nella collezione.
Utilizzando getElementsByClassName() è la stessa idea - ancora una volta, restituisce un insieme e si deve utilizzare il [0] notazione per ottenere il primo elemento (di solito se solo uno è restituito), o un forEach() ciclo per scegliere l'elemento desiderato in base ad altri criteri.
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>
