JavaScript'te, “ sorguSelectorAll() ” yöntemi, belirtilen CSS seçicileriyle tam olarak eşleşen ilk öğeyi alır. Bu yöntem, bu görevi gerçekleştirmek için DOM ağacında gezinmeye başlar. Öğe bulunduğunda, özel görevleri gerçekleştirmek için JavaScript yerleşik özelliklerini veya komut dosyası bölümünde tanımlanan yöntemleri uygular. Bu yöntem genellikle gereksinimlere göre hedeflenen öğeleri seçmek için kullanılır. Kullanıcıların belirtilen seçiciyle eşleşen tüm öğeleri veya verilen dizine yerleştirilen belirli bir öğeyi seçmesine olanak tanır.
Bu kılavuz, JavaScript'te “querySelectorAll()” yönteminin kullanımını göstermektedir.
JavaScript'te “querySelectorAll()” Yöntemi Nasıl Kullanılır?
“ sorguSelectorAll() ” yöntemi, bağımsız değişkeni olarak CSS seçiciyi belirtin. CSS seçicileri 'Tür, Sınıf ve kimlik' içerir. CSS seçici geçersizse bir sözdizimi hatası döndürür, aksi takdirde standart çıktısı olarak statik bir NodeList nesnesi döndürür.
Sözdizimi
Document.querySelectorAll ( CSS seçicileri )
Yukarıdaki sözdiziminde, “ CSS seçicileri ” tüm geçerli CSS seçicilerine bakın.
Yukarıda tanımlanan sözdizimini uygulamalı olarak kullanalım.
HTML Kodu
Verilen HTML koduna genel bakış:
< h2 sınıf = 'demo' > İlk başlık h2 >< h3 sınıf = 'demo' > İkinci başlık h3 >
< P sınıf = 'demo' > İlk paragraf P >
< P sınıf = 'demo' > İkinci paragraf P >
< düğme tıklamada = 'jsFunc()' > Buraya tıklayın ! düğme >
Yukarıdaki kod satırlarında:
- “ ” etiketi, “demo” sınıfına sahip bir alt başlık ekler.
- “ ” etiketi, “demo” adlı aynı sınıfa sahip ikinci bir alt başlığı tanımlar.
- “ ” etiketleri, aynı sınıfa sahip paragraf ifadelerini gömer, yani “demo”.
- “
” etiketi, “jsFunc()” işlevini yürütmek için “onclick” fare etkinliğine sahip yeni bir düğme içerir.
Not: Bu kılavuz boyunca belirli HTML kodu izlenir.
Örnek 1: Aynı Sınıfa Sahip Elemanları Seçip Renklerini Değiştirmek İçin “querySelectorAll()” Yöntemini Uygulamak
Bu örnek, 'demo' sınıfını kullanan tüm öğeleri seçmek için 'querySelectorAll()' yöntemini kullanır.
JavaScript Kodu
Aşağıda belirtilen kodu gözden geçirelim:
< senaryo >işlev jsFunc ( ) {
const listesi = document.querySelectorAll ( '.demo' ) ;
için ( izin vermek ben = 0 ; Ben < liste.uzunluk; ben++ ) {
liste [ Ben ] .stil.renk = 'turuncu' ;
}
}
senaryo >
Yukarıdaki kod satırlarında:
- “ jsFunc() ” fonksiyonu tanımlanır.
- Tanımında, 'liste' değişkeni ' sorguSelectorAll() 'demo' sınıfına sahip tüm öğeleri seçme yöntemi.
- Sonra, “ için ” döngüsü, “ sınıfına sahip bulunan tüm HTML öğelerini yinelemek için bir düğüm listesi başlatır. gösteri ” ve metin renklerini “ kullanarak değiştirin. stil.renk ' mülk.
Çıktı
Yukarıdaki çıktıda, aynı sınıf adını yani “demo”yu içeren elemanların yazı renginin buton tıklandığında değiştiği görülmektedir.
Örnek 2: Belirli Dizine Alınmış Öğeleri Seçmek için “querySelectorAll()” Yöntemini Uygulama
Kullanıcı, tüm öğelerin yanı sıra, 'demo' sınıfına sahip belirli dizinlenmiş öğeyi de seçebilir.
JavaScript Kodu
Verilen JavaScript kodunu göz önünde bulundurun:
< senaryo >işlev jsFunc ( ) {
const listesi = document.querySelectorAll ( 'h2.demo' ) ;
liste [ 0 ] .stil.renk = 'yeşil' ;
}
senaryo >
Yukarıdaki kod parçacığında:
- “list” değişkeni, sınıfı “demo” olan “h2” öğesini “” yardımıyla seçer. sorguSelectorAll() ' yöntem.
- Bundan sonra “list” değişkeni, “0” indeksine yerleştirilen “H2” elemanının metin rengini değiştirmek için “h2” elemanının indeksini belirtir.
Çıktı
Çıktı, sıfır dizine yerleştirilen 'H2' öğesinin metin renginin, düğme tıklandığında 'demo' sınıfının değiştiğini gösterir.
Örnek 3: Aynı Sınıfa Sahip Elemanların Sayısını Almak İçin “querySelectorAll()” Yöntemini Uygulamak
Bu örnek, 'querySelectorAll()' yöntemini kullanarak aynı sınıfa sahip öğelerin sayısını alır.
HTML Kodu
Öncelikle, “Örnek 1”in değiştirilmiş HTML koduna bir göz atın:
< P İD = 'için' > P >
Yukarıda belirtilen HTML kodunda, “Örnek 1” HTML kodunun sonuna “para” kimlikli boş bir paragraf ekleyin.
JavaScript Kodu
Şimdi, JavaScript koduyla devam edin:
< senaryo >işlev jsFunc ( ) {
const düğüm listesi = belge.querySelectorAll ( 'h3' ) ;
Document.getElementById ( 'için' ) .innerHTML = nodelist.uzunluk;
}
senaryo >
Yukarıdaki kod parçacığına göre:
- “jsFunc()” işlevi ilk önce “
” öğelerini “ kullanarak seçer. sorguSelectorAll() ' yöntem.
- Bundan sonra “ getElementById() ” yöntemi, eklenen boş paragrafa, uygulanan “uzunluk” özelliğinin döndürülen değeriyle eklemek için “para” kimliği üzerinden erişir.
Çıktı
Görüldüğü gibi, yukarıdaki çıktı, belirtilen CSS sınıfı seçici 'demo' ile eşleşen toplam '4' öğeyi gösterir.
Çözüm
“ sorguSelectorAll() ” yöntemi, değeri olarak CSS seçici belirtilerek kolayca kullanılabilir. Bu yöntem, her bir HTML öğesini eşleştirir ve belirtilen seçiciyle eşleşenleri seçer. Elemanlar seçildikten sonra, script bölümünde tanımlanan üzerlerinde gerekli görevi gerçekleştirir. Bu kılavuz, JavaScript'te “querySelectorAll()” yönteminin kullanımını kısaca göstermektedir.