Pro třídy, můžete použít document.querySelectorAll() spolu s css selektory, jako je tento:
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>
S classNames, nezapomeňte, že můžete zadat VŠECHNY classNames (někdy to je užitečné určit jeden prvek, pokud existují jiné prvky, které obsahují část classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Také si všimněte, že document.querySelectorAll() vrátí kolekci, ne řetězec - což je důvod, proč je nutné použít [0] zápis vybrat první prvek se vrátil v kolekci.
Pomocí getElementsByClassName() je hodně stejný nápad - opět, vrátí kolekce a musí se použít buď [0] zápis se dostat na první prvek (obvykle, pokud jen jeden, je vrácena), nebo forEach() smyčky si vybrat požadovaný prvek na základě jiných kritérií.
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>
