QuerySelector to metoda JavaScript, która odgrywa kluczową rolę w wyszukiwaniu elementów.
W tej sekcji zrozumiemy i omówimy metodę querySelector (), jej zastosowanie, a także przejrzymy przykład, aby praktycznie zrozumieć koncepcję metody querySelector ().
Przedstawiamy metodę querySelector () JavaScript
Metoda interfejsu elementów, która umożliwia wyszukiwanie i zwracanie pierwszego elementu w dokumencie. Znajduje element pasujący do dowolnego z określonych selektorów CSS lub grupy selektorów. Jeśli jednak nie zostanie znaleziony żaden pasujący element, zwraca wartość null. Metoda querySelector () jest metodą wyłącznie interfejsu Document. Interfejs dokumentu to interfejs opisujący typowe metody, a także właściwości dowolnego dokumentu HTML, XML lub innego rodzaju.
W jaki sposób metoda querySelector () przeprowadza wyszukiwanie
Wiemy, że istnieją różne rodzaje wyszukiwania, które można wykorzystać do wyszukiwania elementów. Jednakże używana jest metoda querySelector (). zamówienie w przedsprzedaży na głębokość przechodzenie przez węzły dokumentu. W nim przechodzenie rozpoczyna się od pierwszego elementu w znacznikach dokumentu, a następnie przechodzi przez kolejne węzły według liczby węzłów podrzędnych.
ile klawiszy ma klawiatura
Składnia
element = document.querySelector(selectors);
Metoda querySelector() jest metodą interfejsu dokumentu i dlatego ma taką składnię.
Ma jeden parametr, „selektory”, który jest ciągiem DOM i ma jeden lub więcej prawidłowych selektorów CSS.
Typ zwrotu
Może zwrócić wartość „null”, jeśli nie zostanie znalezione dopasowanie, a jeśli pierwszy element pasuje do określonych selektorów CSS (jeśli istnieją), zwróci ten element.
Jeśli jednak nie ma żadnego prawidłowego selektora CSS, zgłosi wyjątek „SyntaxError”.
Zanim przyjrzymy się przykładowej implementacji, powinniśmy wiedzieć o różnych typach selektorów CSS. Jeśli nie wiesz, odwiedź naszą https://www.javatpoint.com/css-selector część samouczka CSS.
Zatem zaimplementujemy teraz przykład, w którym omówimy selektor CSS i zachowamy jego wartość pierwszego elementu za pomocą metody querySelector ().
Przykład implementacji querySelector ().
Poniżej znajduje się przykładowy kod, który pozwoli nam zrozumieć działanie metody querySelector():
coś szybkiego
class='colors'>Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll ('p'); console.log(e);
Teraz możesz zobaczyć różnicę między kodem, w którym w pierwszym przykładzie użyliśmy metody querySelector () i wygenerowano tylko pierwszą pasującą wartość selektora. Jednak obserwując wyniki drugiego przykładu, zobaczysz, że zwrócił on wszystkie pasujące wartości określonych selektorów lub grupy selektorów. Wynik powyższego kodu pokazano poniżej:
Wyjaśnienie kodu
- Powyższy kod jest kombinacją HTML i JavaScript.
- W kodzie zaimplementowaliśmy różne selektory CSS.
- W sekcji JavaScript użyliśmy metody querySelectorAll () i wywołaliśmy selektor elementów CSS.
- Zatem metoda querySelectorAll () przechodzi teraz do kodu umożliwiającego przechodzenie przez nią przy użyciu metody zamówienia w przedsprzedaży Depth-first i zwraca wszystkie pasujące wartości elementów określone jako parametry metody querySlectorAll ().
Zatem w ten sam sposób możemy użyć metody querySelectorAll () również dla różnych innych typów selektorów CSS i zwróci ona wszystkie pasujące wartości selektorów określonych jako jej argument. Aby zaimplementować metodę należy zastąpić metodę querySelector() metodą querySelectorAll() dla różnych selektorów, a metoda znajdzie dopasowanie i zwróci przynajmniej jedną pasującą wartość określonego elementu.