W tym samouczku zademonstrujemy różne metody wybierania elementów DOM w JavaScript.
Jakie są różne sposoby wybierania elementów DOM w JavaScript?
Użyj następujących metod wybierania elementów DOM w JavaScript:
- metoda getElementById().
- getElementsByClassName() metoda
- metoda getElementsByTagName().
- metoda querySelector().
- querySelectorAll() metoda
Metoda 1: Wybierz elementy DOM za pomocą metody „getElementById()”.
Aby wybrać elementy DOM, użyj „ getElementById() ” na podstawie przypisanego id elementu. Ta metoda wybiera pojedynczy element na podstawie jego unikalnego „ ID ' atrybut. Podaje odwołanie do elementu o podanym id i zwraca „ zero ”, jeśli nie zostanie znaleziony pasujący element.
Składnia
Użyj podanej poniżej składni metody getElementById():
dokument. getElementById ( „idNazwa” )
Tutaj ' idNazwa ” to nazwa atrybutu id przypisanego do elementu.
Przykład
W pliku HTML utwórz dwa nagłówki w elemencie div, używając „ h4 ”znacznik. Przypisz identyfikatory elementowi div i elementom nagłówków „h4” o nazwie „ dz ' I ' nagłówek ”, odpowiednio. Dodaj atrybut style do elementu div, aby wyrównać go do środka. Przypisz także klasę „ Sekcja ” do drugiego nagłówka, który zmienia kolor:
< dz ID = 'dział' styl = 'wyrównanie tekstu: środek;' >< h4 ID = 'nagłówek' > Uzyskaj dostęp do elementów DOM przy użyciu różnych metod < / h4 >
< h4 klasa = 'Sekcja' ID = 'nagłówek' > Wybierz elementy DOM w JavaScript przy użyciu metody „getElementById()”.
< / h4 >
< / dz >
Teraz otrzymamy „ dz ” używając przypisanego mu identyfikatora za pomocą „ getElementById() ' metoda:
był getById = dokument. getElementById ( 'dział' ) ;Wydrukuj element na podstawie identyfikatora „ dz ” na konsoli:
konsola. dziennik ( getById ) ;Widać, że wymagany element HTML został pomyślnie pobrany:
Metoda 2: Wybierz elementy DOM za pomocą metody „getElementsByClassName()”.
Możesz także wybrać element DOM, używając przypisanej mu klasy za pomocą „ getElementsByClassName() ' metoda. Wybiera listę elementów według ich nazwy klasy. Wyprowadza aktywny obiekt HTMLCollection, obiekt podobny do tablicy, który zawiera wszystkie elementy o określonej nazwie klasy.
Składnia
W przypadku metody „getElementsByClassName()” używana jest następująca składnia:
dokument. getElementsByClassName ( 'Nazwa klasy' )Przykład
Tutaj otrzymamy element zawierający klasę „ Sekcja ” i wydrukuj na konsoli:
był getByClass = dokument. getElementsByClassName ( 'Sekcja' ) ;konsola. dziennik ( getByClass ) ;
Jak widać na wyjściu, zwrócona została tablica o długości 1, która zawiera element „ h4 „kto należy do klasy” Sekcja ”:
Metoda 3: Wybierz elementy DOM za pomocą metody „getElementsByTagName()”.
W przypadku, gdy do elementu nie jest przypisany żaden identyfikator ani klasa, użyj „ getElementsByTagName() ”, aby uzyskać element według nazwy znacznika. Zwraca również aktywny obiekt HTMLCollection, który jest obiektem przypominającym tablicę i zawiera wszystkie elementy, które mają określoną nazwę znacznika.
Składnia
Postępuj zgodnie z podaną składnią, aby wybrać elementy na podstawie nazwy znacznika:
getElementsByTagName ( Nazwa znacznika )Przykład
Wywołaj metodę „getElementsByTagName()”, przekazując nazwę znacznika „ h4 ”. Następnie wydrukuj listę elementów pasujących do podanej nazwy znacznika na konsoli:
był getByTag = dokument. getElementsByTagName ( „h4” ) ;konsola. dziennik ( getByTag ) ;
Wyjście
Metoda 4: Wybierz elementy DOM za pomocą metody „querySelector()”.
Użyj ' zapytanieSelektor() ”, aby uzyskać element DOM. Wybiera pojedynczy element pasujący do określonego selektora CSS. Zwraca pierwszy pasujący element znaleziony w dokumencie. Jeśli żaden element nie jest dopasowany, daje to „ zero ”.
Składnia
Poniższa składnia jest wykorzystywana w metodzie „querySelector()”:
dokument. zapytanieSelektor ( atrybut )Tutaj atrybutem jest selektor CSS, taki jak identyfikator lub klasa, jak „ #mój dokument tożsamości ” “ .moja klasa „.
Przykład
Wywołaj metodę „querySelector()” i przekaż identyfikator „ #nagłówek ”, aby uzyskać elementy, które zawierają ten sam identyfikator:
był getByquery = dokument. zapytanieSelektor ( '#nagłówek' ) ;konsola. dziennik ( getByquery ) ;
Daje pierwszy dopasowany element jako wyjście:
Metoda 5: Wybierz elementy DOM za pomocą metody „querySelectorAll()”.
Jeśli chcesz wybrać wszystkie elementy, które zawierają określony atrybut (id lub klasę), użyj „ zapytanieSelectorAll() ' metoda. Wybiera listę elementów pasujących do określonego zdefiniowanego selektora CSS. Daje obiekt NodeList, który zawiera wszystkie elementy w dokumencie, które pasują do konkretnego selektora CSS.
Składnia
Aby uzyskać listę elementów, użyj następującej składni:
dokument. zapytanieSelectorAll ( atrybut )Przykład
Aby uzyskać listę dopasowanego elementu, który zawiera identyfikator „ nagłówek ” z „ zapytanieSelectorAll() ” i nadruk na elementach na konsoli:
był getByqueryAll = dokument. zapytanieSelectorAll ( '#nagłówek' ) ;konsola. dziennik ( getByqueryAll ) ;
Wyjście
To wszystko na temat wybierania elementów DOM w JavaScript.
Wniosek
Aby wybrać elementy DOM w JavaScript, użyj „ getElementById() ”, „ getElementsByClassName() ”, „ getElementsByTagName() ”, „ zapytanieSelektor() ', albo ' zapytanieSelectorAll() ' metoda. Metody te zapewniają różne sposoby wybierania elementów z modelu DOM na podstawie ich unikalnych identyfikatorów, nazw klas, nazw znaczników lub selektorów CSS. W tym samouczku pokazano różne metody wybierania elementów DOM w JavaScript.