W tym samouczku opisano procedurę znajdowania elementu DOM na podstawie dowolnej wartości atrybutu.
Jak znaleźć/odzyskać element w DOM na podstawie wartości atrybutu?
Aby znaleźć element w DOM na podstawie wartości atrybutu, użyj „ zapytanieSelektor() ' metoda. Podaje pierwszy element znaleziony w dokumencie, który pasuje do podanej wartości selektora CSS.
Notatka : Aby uzyskać wszystkie elementy pasujące do określonej wartości selektora, użyj „ zapytanieSelectorAll() ' metoda.
Składnia
Aby użyć metody „querySelector()”, użyj następującej składni:
dokument. zapytanieSelektor ( selektor ) ;
Tutaj selektorem będzie identyfikator lub klasa jako „ #ID ”, „ .klasa ”:
Możesz również użyć podanej składni do znalezienia elementu na podstawie wartości atrybutu:
dokument. zapytanieSelektor ( '[selektor='wartość']' ) ;
W powyższej składni „ selektor ' będzie ' ID ' Lub ' klasa ', albo ' wartość ' będzie ' idNazwa ' Lub ' Nazwa klasy ”.
Przykład
W pliku HTML utwórz element div, który zawiera nagłówek za pomocą elementu h4, zwykły tekst za pomocą znacznika oraz element div dla wiadomości z przypisanym identyfikatorem „ wiadomość ”:
< identyfikator div = 'dział' styl = 'wyrównanie tekstu: środek;' >< h4 klasa = „sekunda” ID = 'nagłówek' > Znajdź Element w DOM Na podstawie Atrybut Wartość h4 >
< identyfikator rozpiętości = 'Witamy' > Witamy w Linuxhint Zakres >
< identyfikator div = 'wiadomość' >
< identyfikator p = 'Wiadomość' > Cześć chłopaki ! Witamy w samouczkach JavaScript Linuxhint P >
dz >
dz >
Strona będzie wyglądać następująco:
Teraz otrzymamy element, w którym id „ wiadomość ” jest przypisywany za pomocą „ zapytanieSelektor() ' metoda:
każdy element = dokument. zapytanieSelektor ( '#wiadomość' )Na koniec wydrukuj element na konsoli:
konsola. dziennik ( element ) ;Na wyjściu „ dz ” element jest wyświetlany z przypisanym identyfikatorem „ wiadomość ”, co wskazuje, że wymagany element został pomyślnie pobrany:
Możesz także uzyskać element przy użyciu podanej składni. Tutaj otrzymamy element, którego id to „ wiadomość ”:
każdy element = dokument. zapytanieSelektor ( '[identyfikator='wiadomość']' ) ;Wyjście
Teraz zaktualizuj jego kolor za pomocą opcji „ styl ' nieruchomość:
element. styl . kolor = 'niebieski' ;Jak widać, tekst był w „ zielony ” kolor, a teraz został zaktualizowany do „ niebieski ”:
Chodzi o znalezienie elementu w DOM na podstawie wartości atrybutu.
Wniosek
Aby znaleźć element w DOM na podstawie wartości atrybutu, użyj „ zapytanieSelektor() ”, która podaje pierwszy element w dokumencie, który pasuje do określonej wartości selektora CSS. Ponadto, aby uzyskać wszystkie elementy pasujące do określonej wartości selektora, użyj „ zapytanieSelectorAll() ' metoda. W tym samouczku opisano procedurę znajdowania elementu DOM na podstawie dowolnej wartości atrybutu.