Document Object Model (DOM) to strukturalna reprezentacja dokumentu HTML. DOM to drzewo węzłów, które przeglądarka tworzy dla każdej strony internetowej.

DOM jest zorientowany obiektowo. Każdy element w DOM ma swój własny zestaw atrybutów i metod, do których można uzyskać dostęp za pomocą JavaScript.

W tym artykule samouczka dowiesz się, jak korzystać z funkcji selektora DOM, aby uzyskać dostęp do elementów strony internetowej.

Jak uzyskać dostęp do elementów DOM

Możesz uzyskać dostęp do najwyższego poziomu elementu DOM strony internetowej za pośrednictwem globalnego obiektu dokumentu. Na przykład, jeśli masz stronę internetową podobną do następującej:

Witamy


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




O


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Artykuły



Artykuł Tytuł pierwszy


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Czytaj więcej 





Artykuł Tytuł drugi


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Czytaj więcej 





Artykuł Tytuł trzeci


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Czytaj więcej 





Artykuł Tytuł czwarty


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Czytaj więcej 

Pisanie na maszynie dokument w konsoli przeglądarki i naciśnięcie Enter spowoduje wyświetlenie następującego wyniku:

Dane wyjściowe w konsoli są interaktywne. Możesz kliknąć na głowa oraz ciało elementy, aby je rozwinąć. Spowoduje to wygenerowanie następujących danych wyjściowych:

Każdy element sekcji w tag jest również rozwijalny. W zależności od struktury strony internetowej elementy będą się powiększać, aby odsłonić więcej elementów. Powinno to dać ci lepsze zrozumienie struktury DOM.

Związane z: Ukryty bohater stron internetowych: Zrozumienie DOM

Obiekt dokumentu ma specjalną właściwość, ciało, reprezentujący element body. Aby uzyskać dostęp do elementu body, możesz wpisać w konsoli:

dokument.body

Da to następujące dane wyjściowe:

Ale to jest tak daleko, jak możesz posunąć się za pomocą właściwości obiektu. Każda strona ma nagłówek i treść, ale poza tym jest wyjątkowa. Więc pisząc sekcja dokumentu.body lub coś podobnego po prostu nie będzie działać tak, jak chcesz. Zamiast tego istnieją metody, które można wywołać na obiekcie dokumentu, aby uzyskać dostęp do określonych elementów.

Czym są selektory elementów DOM?

Selektory elementów DOM to grupa metod JavaScript, których można użyć w obiekcie dokumentu, aby uzyskać dostęp do elementów na stronie internetowej. Selektory elementów DOM mają dwie kategorie — selektory pojedyncze i wielokrotne.

Funkcje te działają podobnie do selektorów CSS. Pozwalają na pobieranie elementów na podstawie ich nazw tagów lub ich identyfikatorów i atrybutów klasy. Możesz nawet pobierać elementy za pomocą dowolnego selektora CSS.

Związane z: Jak kierować do części strony internetowej za pomocą selektorów CSS

Selektory pojedynczego elementu to:

• pobierzElementById()
• zapytanieSelector()

Selektory wielu elementów to:

• pobierz elementy według nazwy tagu()
• pobierzElementyWedługNazwyKlasy()
• zapytanieSelectorAll()

Selektor elementów DOM, którego używasz, będzie zależał od elementu (elementów), do którego próbujesz uzyskać dostęp.

Korzystanie z selektorów pojedynczego elementu DOM

Selektory zobaczysz głównie w aplikacjach JavaScript. Odsuńmy się więc od konsoli. Utwórz plik JavaScript i połącz go z plikiem HTML za pomocą następującego tagu skryptu:

Gdzie wartość src jest nazwą twojego pliku JavaScript. Umieść ten tag skryptu tuż przed zamykającym tagiem body, .

ten pobierzElementById() Metoda zapewnia dostęp do pojedynczego elementu na stronie internetowej przy użyciu wartości jego identyfikatora. W powyższym dokumencie HTML znajduje się kilka elementów z identyfikatorami. Aby celować w div element z identyfikatorem „artykuł-3” możesz dodać następujący kod do swojego pliku JavaScript:

wartość = document.getElementById('artykuł-3')

Teraz element div z artykuł-3 ID i wszystkie odpowiadające mu właściwości są dostępne z wartość zmienny. Możesz wydrukować wartość zmienna do konsoli za pomocą następującego wiersza kodu:

konsola.log (wartość)

Zobaczysz nazwę klasy, która jest przypisana do elementu div, a także inne ważne atrybuty, takie jak wewnętrzny kod HTML.

Drugim selektorem pojedynczego elementu jest zapytanieSelector(). Ta funkcja jest bardziej wszechstronna, ponieważ możesz przekazać jej dowolny ciąg selektora CSS. Jednak nadal możesz go używać tylko do wybierania jednego elementu na raz.

Na przykład w powyższym układzie HTML jest jedna klasa — artykuły. Cztery elementy div używają tej klasy, ale zapytanieSelector() funkcja zwróci tylko pierwszy element, który ma klasę "articles".

Używanie querySelector() z klasą

Dodaj następujący kod na końcu skryptu:

value = document.querySelector('.articles')
konsola.log (wartość)

To zwróci tylko pierwszy div element z klasą „artykuły”. Zauważ, że określasz selektor w tym samym formacie, co selektor CSS. W CSS wiodąca kropka określa nazwę klasy.

Używanie querySelector() z identyfikatorem

value = document.querySelector('#article-3')
konsola.log (wartość)

Ten kod zwróci jedyny element z identyfikatorem „artykuł-3”, trzeci div element z klasą „artykuły”. Ponownie, ciąg selektora używa standardowej składni CSS, z a # symbol określający identyfikator.

Korzystanie z wielu selektorów elementów DOM

Pozostałe funkcje selektora pobierają grupy elementów. Oni są pobierz elementy według nazwy tagu(), pobierzElementyWedługNazwyKlasy(), oraz zapytanieSelectorAll().

Korzystanie z funkcji getElementsByTagName()

ten pobierz elementy według nazwy tagu() selektor pobiera grupę elementów o tej samej nazwie znacznika. Na przykład, jeśli chcesz zaznaczyć wszystkie h2 elementów na stronie internetowej, możesz użyć następującego kodu:

value = document.getElementsByTagName('h2')
konsola.log (wartość)

To przechowuje wszystkie elementy h2 w kolekcji HTML o nazwie value.

Korzystanie z funkcji getElementsByClassName()

ten pobierzElementyWedługNazwyKlasy() selektor zwraca kolekcję elementów o tej samej nazwie klasy.

value = document.getElementsByClassName('articles')
konsola.log (wartość)

Wstawienie powyższego kodu do pliku JavaScript zwróci cztery elementy div z nazwą klasy „articles” w konsoli przeglądarki.

Korzystanie z querySelectorAll()

ten zapytanieSelectorAll() Metoda zwraca listę węzłów wszystkich elementów, które pasują do podanego selektora. Aby uzyskać dostęp do wszystkich elementów akapitu w sekcji bloga, możesz użyć następującego kodu:

value = document.querySelectorAll('#blog p')
konsola.log (wartość)

Możesz nawet dołączyć kilka selektorów do łańcucha, oddzielając je przecinkami, tak jak w CSS:

value = document.querySelectorAll('h2, .articles')
konsola.log (wartość)

Użyj selektorów DOM do tworzenia dynamicznych stron internetowych

W tym momencie powinieneś mieć jasne zrozumienie DOM i sposobu jego działania. Powinieneś także znać różne selektory pojedyncze i wielokrotne, a także wiedzieć, jak z nich korzystać.

Jednak uzyskanie dostępu do elementów HTML to tylko pierwszy krok w tym, co możesz zrobić z selektorami DOM. Selektory DOM pomogą Ci rozwinąć funkcjonalne aspekty Twojej witryny, takie jak obsługa zdarzeń onclick i onscroll.

Jak sprawić, by Twoja witryna była responsywna i interaktywna dzięki CSS i JavaScript?

Skonfigurowałeś swoją stronę internetową za pomocą HTML i CSS, ale teraz musisz dodać logikę. Oto co robić.

Czytaj dalej

O autorze