Metody dostępu/uzyskania elementów w DOM | wyjaśniono przykładami

JavaScript jest najczęściej używanym językiem scenariuszy do zmiany elementów strony internetowej, prawdę mówiąc, żaden język scenariusza nie może bezpośrednio oddziaływać z elementami HTML. Język skryptowy wchodzi w interakcje z Dom (Model obiektu dokumentu), a DOM wchodzi w interakcje z elementami HTML, ponieważ DOM jest neutralnym dla języka interfejs aplikacji (API).

W tym poście dowiemy się o różnych metodach, których możemy użyć w JavaScript, które pomogą nam zmienić elementy HTML za pomocą interfejsu DOM.

Access \ Get Methods

JavaScript zapewnia nam 5 różnych metod, za pomocą których możemy wchodzić w interakcje z DOM, aby uzyskać dostęp do elementu na stronie internetowej. Te metody są mianowicie:

• getElementById (id)
• getElementsByClassName (klasę)
• getElementsByTagname (tagname)
• QuerySelector (CSS_Selector)
• querySelelectorall (CSS_Selector)

Zastosowanie dostępu \ GET METODS

Aby zademonstrować użycie tych metod GET \ Access, musimy najpierw skonfigurować plik HTML i połączyć plik JavaScript za pomocą następującego wiersza:

Teraz musimy skonfigurować elementy w naszym pliku HTML, możemy to zrobić za pomocą następujących wierszy:

Mam identyfikator „demoid”


Mam klasę „test”
Mam też klasę „test”


Mam tag „Artykuł”
Mam też tag „Artykuł”


Mam zapytanie jako „querySelect”


Mam zapytanie jako „QuerySelectall”

Mam również zapytanie jako „QuerySelectall”

Jak widać, mamy trochę z ID, niektóre z zajęcia i użyliśmy Tag też. Wykonanie tego pliku HTML da nam następujące dane wyjściowe:

Dostęp do elementu za pomocą jego identyfikatora

Pierwszą metodą, którą zamierzamy przetestować, jest getElementById (), Dostęp do elementu z identyfikatorem „Demoid” I zmienimy jego styl, używając następujących wierszy kodu w naszym pliku JavaScript:

var demoid = dokument.getElementById („demoid”);
Demoid.styl.tło Color = „żółty”;

Po uruchomieniu pliku otrzymujemy następujące dane wyjściowe w naszej przeglądarce:

Jak widać, udało nam się uzyskać dostęp do elementu za pomocą jego ID a następnie zmień styl elementu za pomocą JavaScript.

Dostęp do elementów za pomocą nazwy ich klasy

Metoda getElementByClassName () zwraca wiele elementów o tej samej nazwie klasy. Możemy uzyskać dostęp do elementów za pomocą nazwy ich klasy z następującym wierszem kodu:

var testClass = Dokument.getEntsByClassName („test”);

Ponieważ mamy 2 elementy z „testem” klasy, dlatego nasza zmienna „Klasa testowa” jest z tablicy typu, a jeśli chcemy zmienić atrybuty elementów wewnątrz tablicy, musimy do nich odwołać za pomocą ich indeksów tablicowych

klasa testowa [0].styl.border = "2px solid zielony";
klasa testowa [1].styl.border = "2px solid brąz";

Po wykonaniu otrzymujemy następujące dane wyjściowe:

Dostęp do elementów za pomocą nazwy znacznika

Aby wybrać elementy za pomocą nazwy znacznika, używamy metody getElementByTagname (), W naszym przykładzie wybór elementów o nazwie znacznika "artykuł" Używamy następującego wiersza:

var tagelect = dokument.getElementsBaTagname („artykuł”);

Znowu mamy dwa elementy o tej samej nazwie tagu "artykuł" Dlatego zamierzamy ręcznie zmienić ich atrybuty za pomocą ich indeksów tablicy:

tagselect [0].innerHtml = „Zmieniłem swój tekst”;
tagselect [1].innerHtml = „Miałem również zmienił mój tekst”;

Jeśli teraz uruchomimy plik, otrzymamy następujące dane wyjściowe w naszej przeglądarce:

Jak widać, zmieniliśmy tekst elementów za pomocą Nazwa tagu „Artykuł”.

Dostęp do elementu za pomocą selektora zapytania

Możemy wybrać elementy za pomocą selektora zapytania, aby to zrobić dokument.QuerySelelect (), A jeśli chcemy wybrać element z określonym ID, Używamy Symbol „#” w selektorze zapytania jako

var querySelect = dokument.querySelelect („#querySelelect”);

Po uzyskaniu dostępu do elementu możemy zmienić jego granicę z następującym wierszem:

querySelect.styl.border = "1px stały czerwony";

Otrzymasz następujący wynik w przeglądarce:

Dostęp do elementu za pomocą wszystkich selektorów zapytania

Możemy wybrać wszystkie elementy z tym samym zapytaniem za pomocą metody QuerySelelectall (). Dodaj następujący wiersz w pliku JavaScript:

const DemoqueryAll = dokument.querySelelectionall (".querySelectall ”);

Aby zmienić atrybuty obu elementów dostępnych przez niniejszą QuerySelelectionAll (), użyj następujących wierszy kodu:

Demoqueryall.foreach ((zapytanie) =>
zapytanie.styl.border = "1px solid zielony";
);

Otrzymasz następujące wyniki w przeglądarce:

To znaczy dostęp do elementów za pomocą wszystkich metod oferowanych przez JavaScript.

Wniosek

Istnieje 5 głównych metod dostarczanych przez JavaScript, które pomagają nam uzyskać dostęp \ Uzyskaj elementy strony internetowej HTML za pomocą interfejsu DOM. W tym poście dowiedzieliśmy się o wszystkich 5 metodach, wdrożyliśmy wszystkie te metody, zmieniając atrybuty elementów, do których uzyskaliśmy dostęp. Potrzebujemy interfejsu DOM, aby dokonać wszystkich tych zmian, ponieważ żaden język scenariusza nie może bezpośrednio uzyskać dostępu do elementów HTML, a raczej DOM działa jako interfejs API dla języka scenariuszy.