Çeşitli durumlarda, programcıların HTML öğesini name özniteliğiyle alması gerekir. Geliştiricinin, değerini okumak veya değiştirmek için radyo düğmesi veya onay kutusu gibi bir form denetimine erişmek istediğini varsayalım. Daha spesifik olarak, “ isim ” özniteliği ilgili form kontrollerini gruplandırmak için kullanılır ve birçok kontrole aynı isim verilerek tek bir grup olarak erişim sağlanması sağlanır.
Bu gönderi, JavaScript'te bir HTML öğesini ada göre alma yöntemlerini gösterecek.
JavaScript'te Ada Göre Öğeler Nasıl Elde Edilir?
JavaScript'te, aşağıdaki önceden tanımlanmış JavaScript yöntemlerinin yardımıyla bir HTML öğesine, onun name özniteliğini kullanarak erişebilirsiniz:
-
- getElementsByName() Yöntem
- querySelectorAll() Yöntem
Yöntem 1: “getElementsByName()” Yöntemini Kullanarak Ada Göre Öğe Alın
HTML öğesini ada göre almak için “ getElementsByName() ' yöntem. Bu yöntem, belirtilen ad özniteliğine sahip öğelerin bir koleksiyonunu verir.
Sözdizimi
getElementsByName() yöntemi için aşağıdaki sözdizimi kullanılır:
Document.getElementsByName ( 'isim' )
Örnek
İlk olarak, altı düğme oluşturun. Beş tanesinde “ isim ” HTML öğesini almak için kullanılan özellik “ düğme ”. Onclick olayını, “ ApplyStyle() ” beş düğmeyi biçimlendirme işlevi:
< düğme isim = 'btn' > Düğme düğme >< düğme isim = 'btn' > Düğme düğme >
< düğme isim = 'btn' > Düğme düğme >
< düğme isim = 'btn' > Düğme düğme >
< düğme isim = 'btn' > Düğme düğme > < br >< br >
< tıklandığında düğme = 'Style uygula()' > Buraya tıklayın düğme >
Bir işlev tanımlayın ' ApplyStyle() Düğmeye tıklandığında tetiklenecek ve tüm düğmelerin arka plan rengini değiştirecektir. Bunu yapmak için önce tüm ' düğme “ öğeleri çağırarak bir grup olarak getElementsByName() ' yöntem:
const btns = belge.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'öğrenci mavisi' ;
} ) ;
}
Çıktıda da görebileceğiniz gibi butona tıklandığında beş butonun arka plan rengi değişecektir:
Yöntem 2: “querySelectorAll()” Yöntemini Kullanarak Öğeyi Ada Göre Alın
Ayrıca “ sorguSelectorAll() ' kullanarak eleman alma yöntemi isim JavaScript'te ” özniteliği. Bu yöntem, CSS sınıfı, id veya ad gibi belirli bir seçici/öznitelikle eşleşen bir belgedeki tüm öğeleri almak için kullanılır.
Sözdizimi
Verilen sözdizimi, öğeyi “ kullanarak ada göre almak için kullanılır. sorguSelectorAll()” yöntem:
Document.querySelectorAll ( '[isim='n1']' ) ;
Örnek
Aşağıdaki örnekte sadece adı “ olan butonların rengini değiştireceğiz. btn1 ”:
< div >< düğme adı = 'btn' > Düğme düğme >
< düğme adı = 'btn1' > Düğme düğme >
< düğme adı = 'btn' > Düğme düğme >
< düğme adı = 'btn1' > Düğme düğme >
< düğme adı = 'btn' > Düğme düğme > < br >< br >
< tıklandığında düğme = 'Style uygula()' > Buraya tıklayın düğme >
div >
Tanımlanan fonksiyonda, adı “ olan tüm düğme elemanlarına ilk erişimi arayacağız. btn1 ” ve ardından üzerine stil uygulayın:
const btns = belge.querySelectorAll ( '[isim='btn1']' ) ;
btns.forEach ( btn = > {
btn.style.background = 'öğrenci mavisi' ;
} ) ;
}
Verilen çıktı, adı “btn1” olan yalnızca iki düğmenin arka plan rengini değiştirdiğini gösterir:
Not: Tek bir öğe elde etmek istiyorsanız, document.querySelectorAll yerine document.querySelector kullanmanız önerilir.
Çözüm
Bir öğeyi ada göre almak veya almak için ' getElementsByName() ' ya da ' sorguSelectorAll() ” yöntemleri. Elemanı ada göre almak için en yaygın ve verimli kullanılan yöntem “getElementsByName()” yöntemidir. Bu gönderi, JavaScript'te bir HTML öğesini ada göre alma yöntemlerini gösterdi.