Bu makale kısaca DOM Öğesi “click()” Yönteminin ne olduğunu ve HTML'de nasıl kullanılacağını göstermektedir.
HTML'deki DOM Öğesi “click()” Yöntemi nedir?
Bir HTML öğesinde click() yöntemi çağrıldığında, bir kullanıcının öğeyi fareyle tıklattığını simüle eder ve bu da ekli olay işleyicileri tetikler. Bu, geliştiricilerin fiziksel bir fare tıklamasına ihtiyaç duymadan bağlantıları açma, form gönderme veya öğelerin görünürlüğünü değiştirme gibi çeşitli etkileşimli eylemleri gerçekleştirmesine olanak tanır. Bu, etkileşimli ve duyarlı web sayfaları oluşturmaya yardımcı olur.
HTML'de DOM Öğesi “click()” Yöntemi Nasıl Kullanılır?
click() yöntemini kullanmak için, kullanıcıların önce bir tıklamayı simüle etmek için HTML öğesine bir referans alması gerekir. Bu, ' gibi standart DOM geçişi veya sorgulama yöntemlerinden herhangi biri kullanılarak yapılabilir. getElementById ”, “ getElementsByClassName ”, “ sorgu seçici ', veya ' sorguSelectorAll ”.
“Click()” yönteminin daha iyi açıklanması için bir örnek üzerinden gidelim.
Örnek: HTML Onay Kutusu ve Radyo Düğmesi Öğeleri
Bir örnek olarak kabul edilen “ tıklamak() ” yöntemi, HTML onay kutusu ve radyo düğmesi öğeleriyle birlikte kullanılır. Aşağıdaki kodu izleyin:
< biçim >
< giriş
tip = 'onay kutusu'
İD = 'onay kutusu1'
fareyle üzerine gelindiğinde = 'Checkbox()' için
>
Linuxhint tarafından desteklenmektedir
< giriş
tip = 'radyo'
İD = 'Radyo düğmesi'
fareyle üzerine gelindiğinde = 'Radyo için()'
>
Linuxhint tarafından desteklenmektedir
< / biçim >
Yukarıdaki kod parçacığında:
- İlk olarak, türü “ olarak ayarlanmış etiketi kullanılarak web sayfasında bir onay kutusu oluşturulur. onay kutusu ”.
- Bundan sonra, olay dinleyicisi “ fareyle üzerine gelindiğinde ”, onay kutusuna eklenir ve “ forCheckbox() ' işlev.
- Aynı şekilde “ radyo ” butonu, “ kullanılarak oluşturulur.
” etiketi ve olay dinleyicisi buna eklenir. Ancak bu kez “ radyo için() ” işlevi çağrılıyor.
Web sayfasında bir HTML öğesi oluşturulduktan sonra sıra “ tıklamak() ' yöntem:
< senaryo >
onay kutusu işlevi ( ) {
Document.getElementById ( 'onay kutusu1' ) .tıklamak ( ) ;
}
işlev içinRadyo ( ) {
Document.getElementById ( 'Radyo düğmesi' ) .tıklamak ( ) ;
}
< / senaryo >
Yukarıdaki kod parçacığında:
- İlk olarak, iki JavaScript işlevi tanımlayın, ' forCheckbox() ' Ve ' radyo için() ”.
- Bu işlevler “ Document.getElementById() ” belirli kimlikleri “checkbox1” ve “radioButton” ile sayfadaki HTML öğelerine referanslar elde etmek için yöntem.
- HTML öğesine tıklama simülasyonu için click() yöntemi kullanılır. Bu işlev, çağrıldığında durumunu açık veya kapalı olarak değiştirir.
Yukarıdaki kod parçacıklarının yürütülmesinden sonra çıktı şöyle görünür:
Yukarıdaki gif, onay kutusunun ve radyo düğmesinin durumunun “click()” yöntemi kullanılarak değiştiğini göstermektedir.
Çözüm
click() yöntemi, JavaScript aracılığıyla bir web sayfasıyla kullanıcı etkileşimlerini işlemek için özellikle kullanışlıdır.
Kullanıcının öğeyi fiziksel olarak tıklatmasına güvenmek yerine, click olayını programlı olarak simüle etmek için click() yöntemini kullanın. Etkileşimli ve kullanıcı dostu tasarımlar oluşturmak için kullanışlıdır. Bu makale, HTML'deki DOM öğesi “click()” yönteminin anlamını başarıyla göstermiştir.