Jakie są różne sposoby wyboru elementów DOM w JavaScript

Podczas pracy z JavaScript, programiści mogą być konieczne wybrać elementy DOM do różnych celów. Na przykład modyfikowanie treści lub stylizacji strony internetowej, reagowanie na zdarzenia użytkownika, uzyskiwanie dostępu do danych na stronach internetowych i tak dalej. Krótko mówiąc, wybór i manipulowanie elementami DOM za pomocą JavaScript jest niezbędne do tworzenia dynamicznych i interaktywnych stron internetowych.

Ten samouczek pokaże różne metody wyboru elementów DOM w JavaScript.

Jakie są różne sposoby wyboru elementów DOM w JavaScript?

Użyj następujących metod wybierania elementów DOM w JavaScript:

• metoda getelementById ()
• metoda getelementsBassName ()
• metoda getelementsBaTagname ()
• Metoda QuerySelector ()
• Metoda QuerySelectorall ()

Metoda 1: Wybierz elementy DOM przy użyciu metody „getElementById ()”

Do wyboru elementów DOM użyj „getElementById ()„Metoda oparta na przypisanym identyfikatorze elementu. Ta metoda wybiera jeden element po jej unikalnym „ID" atrybut. Daje odniesienie do elementu z określonym identyfikatorem i zwraca „zero„Jeśli nie znaleziono dopasowanego elementu.

Składnia

Użyj poniżej podanej składni do metody getElementById ():

dokument.getElementById („Idname”)

Tutaj "Idname”To nazwa atrybutu ID przypisanego do elementu.

Przykład

W pliku HTML utwórz dwa nagłówki w elemencie DIV za pomocą „H4”Tag. Przypisz identyfikatory do elementu DIV i nagłówków „H4” o nazwie „div" I "nagłówek”Odpowiednio. Dodaj atrybut stylu do elementu DIV, aby wyrównać go w środku. Przypisz także klasę „Sekcja„Do drugiego nagłówka, który zmienia kolor:

Uzyskaj dostęp do elementów DOM przy użyciu różnych metod

Wybierz elementy DOM w JavaScript za pomocą metody „getElementById ()”

Teraz otrzymamy „div”Element za pomocą przypisanego identyfikatora za pomocą„getElementById ()" metoda:

var getById = dokument.getElementById („div”);

Wydrukuj element na identyfikatorze „div„Na konsoli:

konsola.log (getById);

Można zauważyć, że wymagany element HTML został pomyślnie odzyskany:

Metoda 2: Wybierz elementy DOM przy użyciu metody „getEntsByClassName ()”

Możesz także wybrać element DOM za pomocą jego przypisanej klasy za pomocą „getElementsByClassName ()" metoda. Wybiera listę elementów według ich nazwy klasy. Wyświetla obiekt HTMLCollection na żywo, obiekt podobny do tablicy, który zawiera wszystkie elementy o określonej nazwie klasy.

Składnia

Poniższa składnia jest wykorzystywana do metody „getEntsByClassName ()”:

dokument.getElementsByClassName („ClassName”)

Przykład

Tutaj otrzymamy element zawierający klasę „Sekcja”I wydrukuj na konsoli:

var getByClass = dokument.getElementsByClassName („sekcja”);
konsola.log (getByClass);

Jak widać na wyjściu, zwrócona tablica długości 1, która zawiera element „H4„Kto należy do klasy”Sekcja”:

Metoda 3: Wybierz elementy DOM przy użyciu metody „getElementsBaTagname ()”

W przypadku, gdy nie ma identyfikatora lub klasy przypisanej do elementu, użyj „getElementsBaTagname ()”Metoda uzyskania elementu po ich nazwie znacznika. Zwraca również obiekt HTMLCollection na żywo, który jest obiektem podobnym do tablicy, który zawiera wszystkie elementy, które mają określoną nazwę znacznika.

Składnia

Postępuj zgodnie z podaną składnią do wyboru elementów na podstawie nazwy znacznika:

getElementsByTagname (tagname)

Przykład

Przywołaj metodę „getElementByTagname ()”, przekazując nazwę tagu „H4". Następnie wydrukuj listę elementów pasujących do określonej nazwy znacznika na konsoli:

var getByTag = Dokument.getElementsBaTagname („H4”);
konsola.log (getByTag);

Wyjście

Metoda 4: Wybierz elementy DOM przy użyciu metody „querySelelect ()”

Użyj "QuerySelelect ()„Metoda uzyskania elementu DOM. Wybiera pojedynczy element, który pasuje 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żej wymieniona składnia jest wykorzystywana do metody „querySelelect ()”:

dokument.querySelelector (atrybut)

Tutaj atrybutem jest selektor CSS, taki jak identyfikator lub klasa jako „#mój dokument tożsamości”„.moja klasa".

Przykład

Zadzwoń do metody „QuerySelector ()” i przejdź identyfikator ”#nagłówek„Aby uzyskać elementy zawierające ten sam identyfikator:

var getByquery = dokument.QuerySelelect („#Heading”);
konsola.log (getByQuery);

Daje pierwszy dopasowany element jako wyjście:

Metoda 5: Wybierz elementy DOM przy użyciu metody „QuerySelectorall ()”

Jeśli chcesz wybrać wszystkie elementy zawierające określony atrybut (id lub klasa), użyj „QuerySelelection ()" 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 pasowały do ​​konkretnego selektora CSS.

Składnia

Użyj następującej składni, aby uzyskać listę elementów:

dokument.QuerySelelectorall (atrybut)

Przykład

Aby uzyskać listę dopasowanego elementu, który zawiera identyfikator „nagłówek”Z„QuerySelelection ()„Metoda i drukowanie na elementach na konsoli:

var getByQueryAll = dokument.QuerySelelectionall („#Heading”);
konsola.log (getbyQueryAll);

Wyjście

Chodzi o wybór elementów DOM w JavaScript.

Wniosek

Aby wybrać elementy DOM w JavaScript, użyj „getElementById ()”,„getElementsByClassName ()”,„getElementsBaTagname ()”,„QuerySelelect ()", albo "QuerySelelection ()" metoda. Metody te zapewniają różne sposoby wyboru elementów z DOM na podstawie ich unikalnych identyfikatorów, nazw klas, nazw tagów lub selektorów CSS. W tym samouczku pokazano różne metody wybierania elementów DOM w JavaScript.