querySelectorAll

Coddy'nin JavaScript DOM Metotları kursunda ders 9 / 13.

querySelectorAll() fonksiyonu, querySelector'a benzer şekilde bir CSS benzeri seçici ile eşleşen tüm öğelerin bir koleksiyonunu döndürür, ancak tüm eşleşen öğeleri tek seferde yakalamanıza olanak tanır.

const elements = document.querySelectorAll(".other");

Yukarıdaki kod, other sınıf adına sahip tüm öğeleri getirir.

Görev

Kolay

İki adet span içeren bir HTML kodu size verilmiştir.

Sadece JavaScript kullanarak, querySelectorAll fonksiyonunu kullanarak tüm öğelerin stilini değiştirin:

backgroundColor değerini "pink" yapın
border değerini "1px solid red" yapın

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM Metotları bölümündeki tüm dersler

1Giriş

Giriş Document Object Model

2DOM Metotları I

getElementById Eleman Stilini Değiştirme getElementsByClassName Döngü ile Gezinme ve Düzenleme getElementsByTagName querySelector

3DOM Metotları II

querySelectorAlladdEventListener innerHTML createElement ve appendChild classList toggle