Ten artykuł krótko pokazuje, czym jest metoda elementu DOM „click()” i jak jej używać w HTML?
Czym jest metoda „click()” elementu DOM w HTML?
Gdy metoda click() jest wywoływana na elemencie HTML, symuluje ona kliknięcie elementu myszą przez użytkownika, co z kolei wyzwala dołączone procedury obsługi zdarzeń. Dzięki temu programiści mogą wykonywać kilka interaktywnych czynności, takich jak otwieranie linków, przesyłanie formularzy lub przełączanie widoczności elementów bez konieczności fizycznego kliknięcia myszą. Pomaga to tworzyć interaktywne i responsywne strony internetowe.
Jak korzystać z metody elementu DOM „click()” w HTML?
Aby użyć metody click(), użytkownicy muszą najpierw uzyskać odwołanie do elementu HTML w celu symulacji kliknięcia. Można to zrobić za pomocą dowolnej ze standardowych metod przeglądania DOM lub zapytań, takich jak „ getElementById ”, „ getElementsByClassName ”, „ zapytanieSelektor ', Lub ' zapytanieSelectorAll ”.
Przejdźmy przez przykład, aby lepiej wyjaśnić metodę „click()”.
Przykład: pola wyboru HTML i elementy przycisku radiowego
Rozważany jest przykład, w którym „ Kliknij() ” jest używana z polem wyboru HTML i elementami przycisku radiowego. Postępuj zgodnie z poniższym kodem:
< formularz >
< wejście
typ = „pole wyboru”
ID = „pole wyboru 1”
najedź myszką = 'forCheckbox()'
>
Obsługiwane przez Linuxhint
< wejście
typ = 'radio'
ID = 'Przycisk radiowy'
najedź myszką = 'dlaRadio()'
>
Obsługiwane przez Linuxhint
< / formularz >
W powyższym fragmencie kodu:
- Najpierw na stronie internetowej tworzone jest pole wyboru przy użyciu tagu z typem ustawionym na „ pole wyboru ”.
- Następnie detektor zdarzeń „ najedź myszką ” jest dołączony do pola wyboru i wywołuje „ forCheckbox() ” funkcja.
- W ten sam sposób „ radio ” jest tworzony za pomocą „
”, a detektor zdarzeń jest do niego dołączony. Ale tym razem „ dlaRadio() Funkcja jest wywoływana.
Po utworzeniu elementu HTML na stronie nadszedł czas na dodanie „ Kliknij() ' metoda:
< scenariusz >
funkcja pola wyboru ( ) {
document.getElementById ( 'pole wyboru 1' ) .Kliknij ( ) ;
}
funkcja dla radia ( ) {
document.getElementById ( 'Przycisk radiowy' ) .Kliknij ( ) ;
}
< / scenariusz >
W powyższym fragmencie kodu:
- Najpierw zdefiniuj dwie funkcje JavaScript, „ forCheckbox() ' I ' dlaRadio() ”.
- Funkcje te korzystają z „ document.getElementById() ” w celu uzyskania odniesień do elementów HTML na stronie o określonych identyfikatorach „checkbox1” i „radioButton”.
- Do symulacji kliknięcia elementu HTML wykorzystywana jest metoda click(). Ta funkcja przełącza stan włączony lub wyłączony, gdy jest wywoływana.
Po wykonaniu powyższych fragmentów kodu dane wyjściowe wyglądają następująco:
Powyższy gif ilustruje zmianę stanu pola wyboru i przycisku radiowego za pomocą metody „click()”.
Wniosek
Metoda click() jest szczególnie przydatna do obsługi interakcji użytkownika ze stroną internetową za pomocą JavaScript.
Zamiast polegać na fizycznym kliknięciu elementu przez użytkownika, użyj metody click() do programowej symulacji zdarzenia kliknięcia. Przydaje się do tworzenia interaktywnych i przyjaznych dla użytkownika projektów. W tym artykule z powodzeniem zademonstrowano znaczenie metody „click()” elementu DOM w HTML.