Selektor zapytań()
Zasadniczo querySelector() jest używany z „this.template”, który pobiera elementy obecne w określonym szablonie. Jeśli istnieje wiele elementów, zostanie uwzględniony tylko pierwszy element. Null jest zwracany, jeśli określony element nie istnieje w szablonie. Przyjmuje selektor jako parametr. Może to być znacznik nazwy klasy. Identyfikator nie będzie obsługiwany. W niektórych przypadkach masz te same klasy, ale różne wartości. W tym scenariuszu musimy użyć data-recid, który pobiera elementy na podstawie wartości.
Składnia:
Zobaczmy, jak określić selektor wewnątrz querySelector().
- this.template.querySelector(selektor)
- this.template.querySelector(‚[data-recid=”wartość”]’)
Na przykład: jeśli selektorem jest znacznik h1, należy go określić jako „h1”.
1. Wszystkie przykłady wykorzystują plik „meta.xml”. Nie będziemy tego określać w każdym przykładzie. Komponenty LWC można dodać do strony rekordu, strony aplikacji lub strony głównej.
„1,0” ?>
2. We wszystkich przykładach, które omówimy w tym przewodniku, Logika jest dostarczana jako kod „js”. Następnie podajemy zrzut ekranu zawierający cały kod „js”.
Przykład 1:
Najpierw tworzymy znaczniki h1, div, span i błyskawica z tekstem w pliku HTML. Tworzymy także przycisk, który po kliknięciu pobiera poprzednie elementy. W pliku „js” zwracamy tekst wewnętrzny wszystkich czterech elementów za pomocą this.template.querySelector().
pierwszyPrzykład.html
< h1 > Witaj LinuxHint. Jestem w 1 < / h1 >
< div > Witaj LinuxHint. Jestem w div < / div >
< Zakres > Witaj LinuxHint. Jestem w rozpiętości < / Zakres >
Witaj LinuxHint. Jestem na wejściu błyskawicy < / wejście błyskawicy>
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
pobierzSzczegóły ( ) {// Pobieranie tekstu wewnętrznego znacznika h1.
konsola. dziennik ( Ten . szablon . selektor zapytań ( „h1” ) . Tekst wewnętrzny ) ;
// Pobieranie tekstu wewnętrznego znacznika div.
konsola. dziennik ( Ten . szablon . selektor zapytań ( „div” ) . Tekst wewnętrzny ) ;
// Pobieranie tekstu wewnętrznego znacznika span.
konsola. dziennik ( Ten . szablon . selektor zapytań ( 'Zakres' ) . Tekst wewnętrzny ) ;
// Pobieranie wewnętrznego tekstu wejścia błyskawicy.
konsola. dziennik ( Ten . szablon . selektor zapytań ( „wejście błyskawicy” ) . Tekst wewnętrzny ) ;
}
Cały kod:
Wyjście:
Dodaj ten komponent do strony „Rekord” dowolnego obiektu (dodaliśmy go do strony Rekord konta). Sprawdź to okno i przejdź do zakładki „Konsola”.
Teraz kliknij przycisk „Pobierz szczegóły”. Następnie zobaczysz, że na konsoli zostanie wyświetlony tekst wewnętrzny dla wszystkich elementów.
Przykład 2:
Wykorzystaj komponent omówiony w przykładzie 1. Określ dwa elementy za pomocą znacznika „h1” w komponencie HTML i użyj querySelector() w pliku „js”, aby uzyskać tekst wewnętrzny „h1”.
pierwszyPrzykład.html
< h1 > Witaj LinuxHint. Jestem pierwszy h1 < / h1 >
< h1 > Witaj LinuxHint. Jestem drugi h1 < / h1 >
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
pobierzSzczegóły ( ) {// Pobieranie tekstu wewnętrznego znacznika h1.
konsola. dziennik ( Ten . szablon . selektor zapytań ( „h1” ) . Tekst wewnętrzny ) ;
}
Cały kod:
Wyjście:
Istnieją dwa elementy z tym samym znacznikiem. Zatem querySelector() wybiera tylko pierwszy element. Po kliknięciu przycisku „Pobierz szczegóły” zobaczysz pierwsze „h1”, a tekst wewnętrzny zostanie zwrócony w konsoli.
Przykład 3:
Możemy także zapisać funkcję querySelector() w zmiennej i użyć tej zmiennej do uzyskania tekstu wewnętrznego. Utwórzmy znacznik span z tekstem i zwróćmy tekst wewnętrzny na konsoli, przechowując go w zmiennej.
pierwszyPrzykład.html
< Zakres > Witaj LinuxHint. Jestem rozciągnięty < / Zakres >< br >
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
pobierzSzczegóły ( ) {// Pobieranie tekstu wewnętrznego znacznika span.
pozwól mu = Ten . szablon . selektor zapytań ( 'Zakres' ) . Tekst wewnętrzny
konsola. dziennik ( On ) ;
}
Cały kod:
Wyjście:
Przykład 4:
W tym przykładzie tworzymy przycisk i wprowadzamy tekst (wejście błyskawicy), który przyjmie temat jako ciąg znaków. Przekazujemy „wejście błyskawicy” jako selektor do metody querySelector(). Jest przypisany do zmiennej „powiązane z komputerem”. Po kliknięciu tego przycisku wyświetlana jest wartość obecna w tej zmiennej.
drugiPrzykład.html
< Centrum >
< P > Twój temat to: < B > {związane z komputerem} < / B > < / P >
< / Centrum >
< / karta-błyskawica>
< / szablon>
drugiPrzykład.js
związane z komputeremuchwytTemat ( wydarzenie ) {
Ten . związane z komputerem = Ten . szablon . selektor zapytań ( „wejście błyskawicy” ) . wartość ;
}
Cały kod:
Wyjście:
Przykład 5:
Tutaj używamy data-recid. Utwórzmy przycisk z trzema znacznikami zakresu, których nazwa będzie wynosić „Span1”, „Span2” i „Span3” w pliku HTML. Wybierz pierwszy zakres, przekazując „Span1” do rekordu danych w querySelector().
trzeciPrzykład.html
< Zakres dane-recid = „Rozpiętość 1” > Jestem w span-1 < / Zakres >< br >
< Zakres dane-recid = „Rozpiętość 2” > Jestem w span-2 < / Zakres >< br >
< Zakres dane-recid = „Rozpiętość 3” > Jestem w klasie-3 < / Zakres >< br >
< / karta-błyskawica>
< / szablon>
trzeciPrzykład.js
pobierzSzczegóły ( ) {// Pobieranie tekstu wewnętrznego z Span1
konsola. dziennik ( Ten . szablon . selektor zapytań ( '[data-recid='Span1']' ) . Tekst wewnętrzny ) ;
}
Cały kod:
Wyjście:
Wniosek
Dowiedzieliśmy się, jak używać querySelector(), aby uzyskać dostęp do elementów DOM. Funkcja querySelector() użyła „this.template” do wybrania elementów w bieżącym szablonie. Możliwe jest przechowywanie tego w zmiennej lub bezpośrednie użycie. Obydwa są wymienione z przykładami. Podaliśmy także przykład zawierający wiele elementów. W tym przypadku querySelector() zwraca pierwszy element.