JavaScript służy głównie do dodawania zawartości interaktywnej i dynamicznej do statycznych stron HTML, ale do dodania takiej treści, której potrzebuje dostęp do elementów HTML, które są obecne w DOM (model obiektu dokumentu). JavaScript oferuje kilka różnych metod dostępu do elementów HTML obecnych w dokumencie. Tutaj omówimy szczegółowo, co to jest QuerySelelect () metoda i jak z niej korzystać:

Czym jest metoda QuerySelector () w JavaScript

Czy chcesz wyszukać i uzyskać dostęp do dowolnego elementu w dokumencie? QuerySelelect () to idealna metoda, którą masz dla proponowanej funkcjonalności.

QuerySelelect () jest metodą w JavaScript, która odgrywa główną rolę w wyszukiwaniu elementów. Jest to metoda z interfejsu API DOM, która pozwala nam uzyskać lub pobrać pojedynczy element, który pasuje do przekazanego parametru.

QuerySelelect () zwraca null, jeśli nie znaleziono dopasowań; Jeśli jednak w dokumencie znajdują się dwa mecze, uzyska dostęp do pierwszego zdarzenia.

Teraz omówimy składnię QuerySelelect () metoda przed przejściem na przykłady, aby lepiej zrozumieć QuerySelelect () metoda.

Składnia

element = dokument.querySelelector (selektor (s));

QuerySelelect () Metoda przyjmuje tylko jeden parametr, który określa jeden lub więcej selektorów; Selektory te służą do wyboru pierwszego elementu HTML na podstawie jego typu, atrybutu lub wartości jego atrybutu itp.

Tutaj użyjemy różnych selektorów CSS, aby prawidłowo pokazać, w jaki sposób QuerySelelect () Metoda faktycznie działa:

Uniwersalny selektor

Znak gwiazdkowy (*) jest znany jako uniwersalny selektor; Służy do uzyskania dostępu do wszystkich elementów dokumentu:

Cześć!

Witamy w Linux Wskazówka!

Selektor typu/tag

Możemy wyszukać dowolny element, przekazując wartość jego tagu do QuerySelelect () metoda.

Na przykład, jeśli chcemy uzyskać "

" Tag z HTML DOM i zmień jego kolor na czerwony, kod pójdzie w ten sposób:

Html

Cześć!

Witamy w Linux Wskazówka!

JavaScript

Selektor identyfikacyjny

# Znak służy do wyboru elementu na podstawie jego identyfikatora; IDS powinny być unikalne i żadne dwa elementy na jednej stronie HTML nie powinny mieć tego samego identyfikatora:

Na przykład, aby zmienić kolor elementu HTML, którego identyfikatorem jest „przykład-id”, kod będzie wyglądał tak:

Html

Cześć!

Witamy w Linux Wskazówka!

JavaScript

Selektor klasowy

Kropka "." Znak jest selektorem atrybutu klasy, który służy do wyboru elementu na podstawie jego klasy. Wiele elementów może mieć tę samą klasę, ale QuerySelelect () Metoda zwróci tylko pierwszy element:

Na przykład, aby zmienić kolor tła elementu HTML, którego klasę jest „klasa przykładowa”, kod będzie wyglądał tak:

Html

Cześć!

Witamy w Linux Wskazówka!

JavaScript

Wiele selektorów

Możemy podać kombinację wielu selektorów QuerySelelect () Metoda również, selektory te powinny być oddzielone przez przecinki. Jednak uzyska dostęp tylko do jednego elementu, który nastąpi pierwszy w sekwencji kodu HTML:

Na przykład, jeśli wspomniemy o dwóch znacznikach HTML w metodzie QuerySelelect ():

Podczas gdy nasze znaczniki HTML są umieszczane w następującej sekwencji

Cześć!

Witamy w Linux Wskazówka!

Metoda JavaScript QuerySelector () -

QuerySelelect () Metoda zwróci tylko pierwszy mecz, który jest

etykietka:

Aby uzyskać dostęp do wielu elementów w JavaScript, stosuje się metodę QuerySelectorAll ():

Metoda QuerySelelectorAll () w JavaScript

Załóżmy, że chcemy zmienić kolor wszystkich

tagi, których klasa jest „zielona”. HTML i JavaScript pójdą w ten sposób:

Html

Witamy w Linux Wskazówka!

Witamy w Linux Wskazówka!

Witamy w Linux Wskazówka!

Witamy w Linux Wskazówka!

Witamy w Linux Wskazówka!

JavaScript

Wniosek

QuerySelelect () Metoda to skuteczny sposób na dostęp do elementów HTML w DOM. JavaScript zapewnia również inne metody dostępu do elementów DOM, ale QuerySelelect () jest najbardziej wszechstronny i oferuje najwięcej opcji, jeśli chodzi o manipulację DOM. Od wprowadzenia do przykładów, ten post wyjaśnił i wyjaśnił prawie każdy aspekt dokładnie i dokładnie. Za pomocą przykładów wyraźnie opisał koncepcję QuerySelelect () metoda.