Jak uzyskać element atrybutem w JavaScript

Podczas opracowywania stron internetowych istnieją pewne sytuacje, w których programiści/programiści muszą uzyskać elementy w JavaScript za pomocą przypisanych atrybutów, takich jak „ID”,„klasa", i tak dalej. Aby to zrobić, użyj JavaScript „QuerySelelect ()" metoda.

Ten samouczek wyjaśni proces uzyskania elementu HTML za pomocą atrybutu za pomocą JavaScript.

Jak uzyskać element atrybutem w JavaScript?

Aby uzyskać element atrybutem, „QuerySelelect ()„Zastosowana jest metoda. Zwraca pierwszy element dokumentu, który pasuje do konkretnego atrybutu. Ta metoda wybiera określony znacznik o określonej wartości atrybutu. Parametry, które należy przekazać, to „Tagid”,„klasa", i tak dalej.

Składnia
Użyj poniżej wspomnianej składni, aby uzyskać element według atrybutu:

dokument.querySelelect ("[myattribute = wartość]");

W powyższej składni przełóż atrybut z przypisaną wartością jako parametr.

Przykład
W pliku HTML najpierw utwórz „div”Element za pomocą znacznika i przypisz identyfikator„Divid„Do tego. Utwórz przycisk wewnątrz elementu DIV i dołącz „na kliknięcie„Wydarzenie, które wywoła„getElement ()„Metoda uzyskania elementu:

Kliknij, aby uzyskać element


Kliknij

Do stylizacji div użyjemy poniższych wierszy kodu:

#divid
Wyściółka: 10px;
Wysokość: 100px;
szerokość: 200px;
Margines: Auto;
kolor tła: różowy;

Odpowiednie wyjście będzie następujące:

W pliku JavaScript zdefiniuj funkcję „getElement ()„To wywoła podczas klikania przycisku. Zadzwoń do "QuerySelelect ()„Metoda i przekazuj atrybut”ID”I jego wartość„Divid”Jako argument i przechowuj wynikowy element w zmiennej”element”:

funkcja getelement ()
var element = dokument.querySelelect ('[id = "Divid"]');
alert (element);

Dane wyjście pokazuje, że atrybut „Divid„Należy do elementu”div”:

Jeśli chcesz zobaczyć wszystkie elementy wewnątrz konkretnego elementu, zamiast wywoływać metodę alert (), użyj „konsola.dziennik()„Metoda, która pokaże element, w tym jego elementy dziecięce.

funkcja getelement ()
var element = dokument.querySelelect ('[id = "Divid"]');
konsola.log (element);

Wyjście

Powyższy GIF pokazuje HTML „div„Element, który ma atrybut o wartości”Divid”, Z elementami dziecięcymi w konsoli, klikając przycisk.

Wniosek

Aby uzyskać element za pomocą atrybutu, użyj predefiniowanego JavaScript „QuerySelelect ()" metoda. Służy do wyboru określonego znacznika o określonej wartości atrybutu. Ten samouczek wyjaśnia proces uzyskania elementu HTML za pomocą atrybutu za pomocą JavaScript.