JavaScript querySelelector | Wyjaśnione
Podczas pisania kodów HTML i JavaScript, często wymagane jest scalanie funkcji obu plików w celu wykonania wymaganej funkcjonalności. W takim przypadku JavaScript „QuerySelelect ()”Metoda jest cuda w łączeniu elementu HTML z JavaScript za pomocą przypisanego identyfikatora. Ta funkcjonalność można zastosować w przypadkach, gdy chcesz uzyskać dostęp do określonych elementów HTML, aby wykonać na nich określoną operację za pomocą JavaScript.
Ten artykuł poprowadzi Cię o działaniu „QuerySelelect ()„Metoda w JavaScript.
Co to jest metoda JavaScript QuerySelection ()?
„„QuerySelelect ()”Metoda otrzymuje pierwszy element pasujący do selektora CSS. Tę metodę można wykorzystać do dostępu do konkretnego elementu, zmiany jego wartości na określony warunek i wyświetlanie go na modelu obiektu Document (DOM).
Jak używać metody JavaScript QuerySelelect ()?
Postępuj zgodnie z poniżej podaną składnią do użycia metody QuerySelelect () w JavaScript:
dokument.querySelelector (selektory CSS)
Tutaj, "Selektory CSS”Odnosi się do jednego lub więcej niż jednego selektorów CSS.
Przejdziemy teraz przykłady wdrożenia określonej metody w celu opracowania jasnego zrozumienia.
Przykład 1: Zastosowanie metody QuerySelelect () w celu sprawdzenia, czy naciśnięty jest konkretny klawisz
W poniższym przykładzie najpierw uwzględnimy pole wejściowe z następującą wartością symboliczną:
Następnie dodaj nagłówek za pomocą „ Status Następnie pobieraj utworzone pole wejściowe i określone nagłówek za pomocą „QuerySelelect ()" metoda: Następnie załącz wydarzenie nazwane „Keydown" używając "addEventListener ()„Metoda do pola wejściowego. Na koniec zastosuj warunek sprawdzania określonego klucza (karta) i zwróć odpowiedni wynik na DOM za pomocą „Innertext" nieruchomość: Ten program najpierw przyniesie pole wejściowe i dodaną etykietę przy użyciu metody QuerySelelect () i można go zaobserwować, że po naciśnięciu klawisza TAB, wewnętrzny tekst dodanej etykiety jest zmieniany: Przykład 2: Zastosowanie metody QuerySelector () do obliczenia wymiarów obrazu W poniższym przykładzie utworzymy przycisk i dołączymy do niego zdarzenie OnClick, które uzyska dostęp do funkcji IMGSIZE () po uruchomieniu: Teraz podaj odpowiednio ścieżkę i identyfikator obrazu: Następnie zdefiniuj funkcję o nazwie „imgSize ()". Uzyskaj dostęp do obrazu i pobieraj jego wymiary za pomocą właściwości szerokości i wysokości, odpowiednio i wyświetl je na oknie dialogowym alertu: Wyjście Podaliśmy różne przykłady do wdrożenia metody JavaScript QuerySelector (). Wniosek „„QuerySelelect ()”Metoda otrzymuje pierwszy element pasujący do selektora CSS. Można go wykorzystać do dostępu do elementu, określając jego identyfikator jako argument, a następnie wykonując wymaganą funkcjonalność za pomocą kodu JavaScript. Niniejszy podręcznik wyjaśnił użycie metody QuerySelelection () w JavaScript, wdrażając różne scenariusze przypadków. Let Input = Dokument.QuerySelelect („Wprowadzenie”);
niech wynik = dokument.QuerySelelect („H2”);wejście.addEventListener („keydown”, (e) =>
if (e.key === "tab")
wynik.innerText = "tab klawisz naciśnięty";
w przeciwnym razie
wynik.innerText = "tab klawisz nie naciśnięty";
);funkcja imgSize ()
var Dimensions = Dokument.querySelelect („#dim”);
var szerokość = wymiary.szerokość;
var wysokość = wymiary.wysokość;
alert („oryginalna szerokość =” + szerokość + ”,„ + „oryginał high =” + wysokość);