JavaScript służy do dodawania interaktywności do statycznej strony HTML; Ale aby dodać interaktywność, której potrzebuje dostęp do elementów HTML obecnych w DOM. JavaScript oferuje szereg metod dostępu do elementów HTML obecnych w DOM. Tutaj szczegółowo omówimy większość z nich:

Jak uzyskać dostęp do elementu DOM według jego identyfikatora za pomocą JavaScript

Jedną z najczęstszych metod dostępu do elementu w HTML DOM jest getElementById () który uzyskuje dostęp do elementu opartego na wartości jego atrybutu identyfikatora. Wartość atrybutów identyfikatorów ma być unikalna i żadne dwa elementy na jednej stronie HTML nie powinny mieć podobnych identyfikatorów. Nawet jeśli istnieje wiele elementów, które mają ten sam identyfikator, getElementById () Metoda zwraca tylko jeden element (pierwszy element z tym identyfikatorem w pliku HTML).

Teraz przyjrzymy się przykładowi, aby lepiej zrozumieć, w jaki sposób getElementById () Metoda działa.

Notatka: Konsola przeglądarki służy do demonstracji przykładów w tym artykule.

Dla tego przykładu zostanie użyty następujący plik HTML; JavaScript zostanie dodany w ramach Tagi, które są specjalnie używane do osadzania kodu JavaScript bezpośrednio w pliku HTML.

Jak uzyskać elementy w JavaScript z DOM?

Jak uzyskać dostęp do elementu DOM według jego identyfikatora?

getElementById ()

W powyższym pliku HTML mamy akapit z unikalnym identyfikatorem I.mi. przykład-id. Jeśli chcemy uzyskać dostęp do tego elementu akapitu, możemy użyć getElementById () metoda:

Możemy teraz użyć nowo utworzonej zmiennej akapitowej do manipulowania przykład-id element bezpośrednio z JavaScript e.g Jeśli chcemy zmienić tło i kolor tekstu akapitu, to:

Jak uzyskać dostęp do elementów DOM według ich klasy

getElementsByClassName () Metodę można zastosować do uzyskania wielu elementów, które mają tę samą wartość atrybutu klasowego. Pokazać, jak getElementsByClassName () Metoda Works Modyfikujemy nasz plik HTML w następujący sposób:

Jak uzyskać elementy w JavaScript z DOM?

Jak uzyskać dostęp do elementów DOM według ich klasy?

getElementsByClassName ()

getElementsByClassName () Metoda zwraca wszystkie elementy, które mają określoną klasę w postaci tablicy. Jeśli więc chcemy zmodyfikować tylko jeden z elementów obecnych w zwróconej tablicy, będziemy musieli uzyskać do niego dostęp z jego numerem indeksu:

Możemy użyć pętli, jeśli chcemy zastosować te same zmiany do wszystkich elementów tablicy:

Jak uzyskać dostęp do elementów DOM według ich tagu

JavaScript zapewnia również getElementsBaTagname () Metoda, którą można zastosować do dostępu do wszystkich elementów, które mają ten sam znacznik HTML:

Jak uzyskać elementy w JavaScript z DOM?

• metoda getelementById ()


• metoda getelementsBassName ()


• Metoda getElementsByName ()


• metoda getelementsBaTagname ()


• Metoda QuerySelector ()


• Metoda QuerySelectorall ()

Możemy ponownie użyć pętli, aby zastosować te same zmiany do wszystkich elementów obecnych w nowej tablicy:

Jak uzyskać dostęp do elementów DOM za pomocą metod Selektorów zapytania

JavaScript ma również QuerySelelect () i QuerySelelection () Metody, które można zastosować do dostępu do elementów HTML DOM. Aby uzyskać dostęp do jednego elementu, możemy użyć QuerySelelect () metoda; Jeśli istnieje wiele elementów z tym samym identyfikatorem lub klasą, to QuerySelelect () Metoda zwraca pierwszy element:

Jak uzyskać elementy w JavaScript z DOM?

metoda getelementById ()

metoda getelementsBassName ()

Metoda getElementsByName ()

metoda getelementsBaTagname ()

Metoda QuerySelector ()

Metoda QuerySelectorall ()

# Znak jest selektorem atrybutu ID, podczas gdy . Znak jest selektorem atrybutu klasowego.

QuerySelelection () Metoda zwraca tablicę zawierającą wszystkie elementy DOM o określonej nazwie klasy lub identyfikatorze:

Jak uzyskać elementy w JavaScript z DOM?

metoda getelementById ()

metoda getelementsBassName ()

Metoda getElementsByName ()

metoda getelementsBaTagname ()

Metoda QuerySelector ()

Metoda QuerySelectorall ()

Możemy wykonać różne metody, takie jak .dla każdego() Metoda na tablicach zwróconych przez QuerySelelection (). Te metody nie działają z zwróconymi tablicami Getelement metody.

Wniosek

Dostęp do elementów HTML DOM i uczynienie ich interaktywnymi za pośrednictwem JavaScript jest najbardziej podstawową, ale istotną częścią każdej pracy DeveloePR. Tutaj wymieniliśmy pięć najczęstszych metod stosowanych w JavaScript do dostępu do elementów DOM.