Bu öğretici, herhangi bir öznitelik değerine dayalı olarak DOM öğesini bulma prosedürünü açıklayacaktır.
Bir Öznitelik Değerine Dayalı Olarak DOM'da Bir Öğe Nasıl Bulunur/Geri Alınır?
Bir öznitelik değerine dayalı olarak DOM'daki öğeyi bulmak için ' sorguSelector() ' yöntem. Belgede bulunan ve verilen CSS seçici değeriyle eşleşen ilk öğeyi verir.
Not : Belirtilen seçici değeriyle eşleşen tüm öğeleri almak için ' sorguSelectorAll() ' yöntem.
Sözdizimi
'querySelector()' yöntemini kullanmak için aşağıdaki söz dizimini kullanın:
belge. sorgu seçici ( seçici ) ;
Burada seçici, ' olarak bir kimlik veya sınıf olacaktır. #İD ”, “ .sınıf ”:
Öğeyi öznitelik değerine göre bulmak için verilen sözdizimini de kullanabilirsiniz:
belge. sorgu seçici ( '[selector='değer']' ) ;
Yukarıdaki sözdiziminde, “ seçici ' olacak ' İD ' veya ' sınıf ', ya da ' değer ' olacak ' kimlikAdı ' veya ' sınıf adı ”.
Örnek
Bir HTML dosyasında, h4 öğesini kullanan bir başlık, etiketini kullanan bir düz metin ve atanmış kimliği olan bir mesaj için bir div içeren bir div öğesi oluşturun. İleti ”:
< div kimliği = 'div' stil = 'metin hizalama: merkez;' >< h4 sınıf = 'sn' İD = 'yön' > bul eleman DOM tabanlı bir Bağlanmak Değer h4 >
< yayılma kimliği = 'Hoş geldin' > Linuxhint'e Hoş Geldiniz açıklık >
< div kimliği = 'İleti' >
< p kimliği = 'mesaj' > Merhaba beyler ! Linuxhint JavaScript Eğitimlerine Hoş Geldiniz P >
div >
div >
Sayfa aşağıdaki gibi görünecektir:
Şimdi, 'id' öğesinin bulunduğu öğeyi alacağız. İleti ”, “ kullanılarak atanır. sorguSelector() ' yöntem:
her eleman = belge. sorgu seçici ( '#İleti' )Son olarak, öğeyi konsolda yazdırın:
konsol. kayıt ( eleman ) ;Çıktıda, “ div ” öğe atanan kimliğiyle gösterilir “ İleti ”, gerekli öğenin başarıyla alındığını gösterir:
Öğeyi verilen sözdizimini kullanarak da alabilirsiniz. Burada, kimliği “ olan öğeyi alacağız. mesaj ”:
her eleman = belge. sorgu seçici ( '[id='mesaj']' ) ;Çıktı
Şimdi, “ kullanarak rengini güncelleyin. stil ' mülk:
eleman. stil . renk = 'mavi' ;Gördüğünüz gibi, metin “ yeşil ” renk ve şimdi “ olarak güncellendi. mavi ”:
Bu, bir öznitelik değerine dayalı olarak bir DOM'da bir öğe bulmakla ilgilidir.
Çözüm
Bir öznitelik değerine dayalı olarak DOM'da bir öğe bulmak için ' sorguSelector() ”Belirtilen CSS seçici değeriyle eşleşen belgedeki ilk öğeyi veren yöntem. Ayrıca, belirtilen seçici değeriyle eşleşen tüm öğeleri elde etmek için ' sorguSelectorAll() ' yöntem. Bu öğretici, herhangi bir öznitelik değerine dayalı olarak DOM öğesini bulma prosedürünü açıkladı.