Znajdź element w DOM na podstawie wartości atrybutu

W różnych sytuacjach może być konieczne znalezienie elementu DOM na podstawie wartości atrybutu do zastosowania dowolnego stylizacji lub innej funkcji. Na przykład, pracując z dużymi lub złożonymi stronami internetowymi lub wybierając określony element na podstawie jego atrybutów do stylu lub manipulowania. Pomaga pracować bardziej wydajnie i skutecznie na stronach internetowych.

W tym samouczku opisuje procedurę znalezienia 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 „QuerySelelect ()" 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 „QuerySelelection ()" metoda.

Składnia

Do użycia metody „QuerySelection ()” użyj następującej składni:

dokument.querySelelection (selektor);

Tutaj selektor będzie identyfikatorem lub klasą jako „#ID”,„.klasa”:

Możesz także użyć podanej składni do znalezienia elementu na podstawie wartości atrybutu:

dokument.querySelelect ("[selector = 'value']");

W powyższej składni „selektor" będzie "ID" Lub "klasa", albo "wartość" będzie "Idname" 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 i div dla wiadomości z przypisanym identyfikatorem „wiadomość”:

Znajdź element w DOM na podstawie wartości atrybutu

= „Welcome”> Witamy w Linuxhint

Cześć chłopaki! Witamy w samouczkach JavaScript Linuxhint

Strona będzie wyglądać w następujący sposób:

Teraz otrzymamy element, w którym identyfikator „wiadomość”Jest przypisywany za pomocą„QuerySelelect ()" metoda:

var element = dokument.QuerySelelect („#Message”)

Na koniec wydrukuj element na konsoli:

konsola.log (element);

W wyjściu „div”Element jest pokazany z przypisanym identyfikatorem„wiadomość”, Który wskazuje, że wymagany element został pomyślnie odzyskany:

Możesz także uzyskać element za pomocą podanej składni. Tutaj otrzymamy element, którego identyfikatorem jest „MSG”:

var element = dokument.querySelelect ("[id = 'msg']");

Wyjście

Teraz zaktualizuj jego kolor za pomocą „styl" nieruchomość:

element.styl.color = „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 w oparciu o wartość atrybutu, użyj „QuerySelelect ()„Metoda, 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 „QuerySelelection ()" metoda. W tym samouczku opisano procedurę znalezienia elementu DOM na podstawie dowolnej wartości atrybutu.