Pre triedy, môžete použiť document.querySelectorAll() spolu s css selektory, ako 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, nezabudnite, že môžete zadať VŠETKY classNames (niekedy, že je užitočné určiť jeden prvok, ak sú tu iné prvky, ktoré obsahujú časti classList:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Tiež si všimnite, že document.querySelectorAll() vráti zbierka, nie string - čo je dôvod, prečo je potrebné používať [0] zápis na výber prvého prvku sa vrátil v zbierke.
Pomocou getElementsByClassName() je oveľa rovnaký nápad - opäť vráti zber a jeden sa musí využiť [0] zápis dostať na prvý prvok (zvyčajne iba jeden sa vráti), alebo forEach() slučky vybrať požadovaný prvok na základe iný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>
