Dostęp do elementów HTML można uzyskać za pomocą metod JavaScript. Metody JavaScript Uzyskaj dostęp do elementów HTML z DOM (logiczna struktura przypominająca drzewo dokumentów internetowych). JavaScript zapewnia obsługę pięciu metod używających nazwy, identyfikatora, nazwy klas, nazwy tagn lub selektora CSS, aby uzyskać dostęp do obiektów. Dostęp do elementów HTML za pomocą JavaScript, możesz manipulować elementami HTML. Ten artykuł zawiera demonstrację możliwych sposobów dostępu do elementów HTML za pomocą metod JavaScript.

Jak uzyskać dostęp do elementów HTML za pomocą metod JavaScript

Pięć metod JavaScript pomaga w dostępie do elementów HTML, a metody te opisano poniżej.

Jak uzyskać dostęp do elementów HTML według identyfikatora

Atrybut ID jednoznacznie identyfikuje element HTML, a następująca metoda JavaScript pomogłaby w uzyskaniu elementów HTML według ID.

ID odnosi się do elementu HTML i jest używany przez JavaScript w celu uzyskania dostępu do tego elementu HTML. Obiekt (w DOM), który pasuje do identyfikatora, zostałby zwrócony.

Przykład:

Kod podany poniżej ćwiczy getElementById () Metoda JavaScript.

Powyższy kod uzyskuje dostęp do elementu, który ma ID = UN1, a następnie wartość tego elementu jest manipulowany „Witaj świat!".

Wyjście

Z wyjścia obserwuje się, że oryginalna zawartość

został zmieniony na „Witaj świat!".

Jak uzyskać dostęp do elementów HTML według nazwy

Atrybut nazwy elementów może być również używany przez JavaScript do dostępu do elementów HTML. Jednak jedna nazwa może być powiązana z wieloma elementami HTML. Dostarczony kod korzysta z getElementsByName () metoda.

Dwa akapity mają takie same nazwiska; Dlatego musimy zdefiniować numer indeksu każdego akapitu (w momencie użycia metody). Numer indeksu pierwszego akapitu jest określany jako [0], a drugi akapit jako [1].

Wyjście

Z wyjścia obserwuje się, że zawartość akapitu (przy wskaźniku [1]) została zmieniona.

Jak uzyskać dostęp do elementów HTML według tagname

Metoda JavaScript getElementsBaTagname () jest używany tutaj, aby uzyskać dostęp do elementów według ich nazw tagów.

Powyższy kod uzyskuje dostęp do akapitu (przy indeksie [0]) i zmienia jego wartość na „akapit jest dostępny”.

Notatka: Dokument HTML zawiera różne tagi, a jeśli masz do nich dostęp za pomocą JavaScript's getElementsBaTagname () Metoda, musisz wspomnieć o numerze indeksu elementu.

Wyjście

Dane wyjściowe pokazuje, że zawartość akapitu przy indeksie 0 została zmieniona.

Jak uzyskać dostęp do elementów HTML według nazwy klasy

getElementsByClassName () W celu uzyskania dostępu do elementów HTML stosuje się metodę JavaScript.

Powyższy kod uzyskuje dostęp do klasy o nazwie „dwa”I zmienia jej treść. Dokument może zawierać kilka klas tych samych nazw; Zatem numer indeksu jest również obowiązkowy w tym przypadku.

Wyjście

Dane wyjściowe pokazuje, że zawartość nazwy klasy (nazwana dwa) został zmieniony.

Jak uzyskać dostęp do elementów HTML według QuerySelector

Element HTML może mieć klasy i identyfikatory, które można użyć do zmiany stylów elementów. QuerySelelect () Metoda JavaScript umożliwia uzyskanie elementów pasujących do określonego selektora CSS. querySelelector jest dalej podzielony na dwie metody;

• QuerySelelect () Metoda zwraca pierwszy element (który pasuje do wyrażenia)
• QuerySelelection () Metoda zwraca wszystkie pasujące elementy

Notatka: Aby uzyskać dostęp do klasy, musisz umieścić kropkę (.) Przed nazwą klasy i identyfikatora musisz użyć znaku (#) przed nazwą identyfikatora.

Przykład 1: Za pomocą metody QuerySelelection ()

Kod napisany poniżej używa QuerySelelect () metoda uzyskania pierwszego elementu, który pasuje do stanu.

W powyższym kodzie QuerySelelect () Metoda jest stosowana do elementów posiadających class = ”LH”.

Wyjście

Dane wyjściowe pokazuje, że dostęp do pierwszego akapitu (pasuje do nazwy i identyfikatora klasy), a jego zawartość jest aktualizowana.

Przykład 2: Korzystanie z metody QuerySelectorAll ()

Jak omówiono wcześniej QuerySelelect () Metoda uzyskuje dostęp tylko do pierwszego meczu. Możesz użyć QuerySelelection () metoda dostępu do wybranego elementu, tak jak to zrobiliśmy w poniższym przykładzie.

Powyższy kod praktykuje QuerySelelection () Metoda dostępu do elementów, które mają id = „un". Numer indeksu jest obowiązkowy do umieszczenia i użyliśmy [1] tutaj.

Wyjście

Z wyjścia stwierdzono, że selektory CSS, takie jak klasa i id, zostały użyte przez QuerySelelection () Metoda dostępu/zmiany zawartości akapitu na indeksie 1.

Wniosek

JavaScript może uzyskać dostęp do elementów HTML za pomocą Nazwa, identyfikator, nazwa klas, nazwa tagn i QuerySelector elementów HTML. Metody te można również zastosować do manipulowania zawartością elementu HTML. W tym artykule pokazuje pięć metod JavaScript, które uzyskują dostęp do elementów HTML w różne sposoby. Identyfikator, klasę i nazwa tagnamentu Metody mają tendencję do bezpośredniego dostępu do elementów HTML. Jednakże querySelelect ()/querySelelectionAll () Metoda wykorzystuje selektory CSS w celu uzyskania dostępu i zmiany elementów HTML.