Sınıflar için şunları kullanabilirsiniz document.querySelectorAll() css seçicileri ile birlikte, bunun gibi:
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ınıf adlarıyla, TÜM sınıf adlarını belirtebileceğinizi unutmayın (bazen sınıf listesinin bir bölümünü içeren başka öğeler varsa, bir öğeyi tam olarak belirlemek yararlıdır:
document.querySelectorAll('.cake.forest.carousel')[0] . . .
Ayrıca şunu da unutmayın document.querySelectorAll() bir dize değil, bir koleksiyon döndürür - bu yüzden kullanmak gereklidir [0] koleksiyonda döndürülen ilk öğeyi seçmek için gösterim.
Kullanım getElementsByClassName() aynı fikir-yine, bir koleksiyon döndürür ve biri kullanmalıdır [0] ilk öğeyi almak için gösterim (genellikle yalnızca bir tane döndürülürse) veya forEach() diğer ölçütlere göre istediğiniz öğeyi seçmek için döngü yapın.
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>
