JavaScript: Wyszukiwanie elementów w drzewie DOM
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej i zacząć korzystać z nowoczesnych frameworków.
W tej lekcji pokażę Ci w jaki sposób
możemy wyszukiwać elementów w drzewie DOM.
I teraz o co chodzi, że możemy wyszukiwać elementów.
Chodzi o to, żeby z poziomu kodu
JavaScript wyszukać sobie w tym żywym drzewie DOM na przykład takiego elementu
jak ten section i mieć do niego odwołanie w kodzie JavaScript.
W praktyce to oznacza, że my po stronie
właśnie tej JavaScript otrzymamy pewnego rodzaju obiekt
a jak to bywa w języku JavaScript, obiekty
mają właściwości i metody, więc właśnie za pomocą właściwości
będziemy mogli i odczytać i ustawić pewne rzeczy na takim elemencie, ale także za
pomocą metod będziemy mogli pewne rzeczy modyfikować. Czyli np.
będziemy mogli zmienić klasę tego
elementu, dodać inną klasę, zmienić jego treść itd.
A więc z poziomu języka JavaScript
będziemy mogli modyfikować to, co dzieje się na naszej stronie internetowej.
W tym celu przygotowałem taką stronę, na której jest kilka elementów.
Mamy i jakiś formularz i przycisk i link i tutaj jakiś nagłówek,
w kodzie html wygląda to tak.
Chodziło o to, żebyśmy mieli po prostu i jakiś identyfikator i klasy i np.
atrybut name, bo będę chciał Ci pokazać
jak na kilka sposobów można wyszukiwać elementów w drzewie DOM.
W zasadzie są dwie metody, które wystarczą
Ci w każdej sytuacji, więc od nich będę chciał zacząć.
Przejdziemy do skryptu i powiedzmy, że na
stronie będziemy chcieli wyszukać sobie tego kontenera z identyfikatorem container.
Jak możemy to zrobić?
Oczywiście tworzymy sobie jakąś zmienną lub stałą, w której chcemy przechowywać
referencje do takiego obiektu i powiedzmy nazwiemy sobie ją container
i korzystamy z document a document jest to taki globalny obiekt, który jest dostępny.
On jest zaraz pod obiektem window, czyli
podobnie jak Ci pokazywałem było z location, czyli np.
ze screen. Możemy się do tego odwołać pod window.document
albo po prostu od razu document. I na nim są różne metody, które nas interesują.
I jedną z takich metod jest querySelector
pisana w ten sposób gdzie możemy przekazać string i ten string
będzie to css selector.
Czyli jeżeli masz jakiekolwiek doświadczenie z kodem CSS to wiesz, że
jeżeli chcielibyśmy do takiego kontenera przypisać np.
tło czerwone to byśmy w CSS go stargetowali w
ten sposób. Tak byśmy powiedzieli container. I dokładnie z poziomu języka JavaScript
możemy to zrobić w ten sposób i jeżeli na stronie zostanie znaleziony taki element
tutaj pod container zostanie zapisana do niego referencja,
jeżeli nie, otrzymamy tutaj wartości null, co pozwala nam sprawdzić np.
w if if container,
jeżeli tu będzie null, to ten kod się nie wykona
jeżeli będzie obiekt potraktowany jako wartość prawdziwa to ten kod się wykona,
wtedy wiemy, że taki kontener został znaleziony.
No i ok, mamy teraz taki container,
wiemy, że możemy się do niego odwołać w konsoli.
Co pod nim tak naprawdę się znajduje?
Tutaj Chrome DevTools pokaże nam to w ten sposób, możemy na to najechać, podświetlić sobie tutaj albo
kliknąć prawym przyciskiem i wybrać Reveal in Elements panel
wtedy on się pokaże tutaj, ale tak naprawdę jest to obiekt, który będzie
zawierał jak wciśniemy sobie kropkę bardzo wiele różnych właściwości i metod i bardzo
wiele z nich będziemy sobie omawiać w kolejnych lekcjach.
Niemniej jednak na razie chcę Ci pokazać tylko, jak możemy wyszukiwać tych
elementów w drzewie DOM, a później pokażę Ci, co możemy z nimi robić.
Być może się domyśliłeś, ale querySelector
zawsze zwróci nam tylko jeden element.
Czyli jeżeli na stronie mamy np.
dwa paragrafy i powiedziałbym tutaj const p równa się document.querySelector
i podam po prostu p to jest też poprawny CSS-owy selektor, to zostanie znaleziony
pierwszy paragraf jaki znajdzie się na stronie.
A gdybym chciał znaleźć pierwszy paragraf w ogóle np. w tym elemencie kolumn,
my tu nie mamy innych paragrafów, ale
podobnie jak w CSS mógłbym powiedzieć po prostu klasa column i znajdź mi paragraf.
Czyli tutaj te selektory wyglądają
identycznie jak w przypadku CSS, a więc jeżeli jakiś problem byś z nimi miał,
to znaczy, że nie masz jeszcze wystarczającej wiedzy z zakresu
targetowania elementów w kodzie CSS. Bo to działa dokładnie tak samo.
Mamy jeszcze jedną metodę, która może być przydatna.
Będę chciał sobie pobrać wszystkie paragrafy jakie znajdują się na stronie,
więc nazwę sobie to allParagraphs i to jest document.querySelectorAll.
Czyli chcemy wyszukać więcej niż jednego elementu i podam tutaj string np. p.
I teraz jest jedna bardzo istotna różnica
pomiędzy tym co jest zwrócone z querySelectorAll a z querySelector.
Bo mówiłem, że z querySelector jest zwracany
albo odwołanie do tego elementu albo null. W przypadku querySelectorAll
jeżeli elementy o podanym selektorze
nie zostaną znalezione, to zostanie zwrócona tzw.
pusta kolekcja. Czyli nie wystarczyłoby tutaj zrobić
allParagraphs, żeby sprawdzić czy te elementy są czy nie,
ale ta kolekcja to jest taki obiekt tablicopodobny
to oznacza, że nie jest to prawdziwa tablica, ale ma ona np.
właściwość length.
I jeżeli zatem żadne elementy nie zostaną znalezione, length zwróci nam 0.
Może wyświetlmy sobie
w konsoli, co zostało zwrócone, allParagraphs.
Jak widzisz został zwrócony obiekt z takiej klasy NodeList i
w środku widzimy dwa paragrafy z klasą text.
Tutaj jest to przedstawione w taki sposób w Chrome DevTools
natomiast to co jest ważne to skoro jest
to obiekt tablicopodobny, to na nim możemy wykonywać pętle, a także możemy się
odwoływać do poszczególnych elementów w taki sposób, czyli po indeksie.
Jeżeli zrobię coś takiego, czyli znalazłem wszystkie paragrafy, a następnie odwołałem
się do pierwszego, to tutaj będę miał dokładnie to samo,
jakbym wyszukał poprzez querySelektor po prostu pierwszego paragrafu na stronie.
Czyli zachowuje się to po prostu jak tablica,
w tym przypadku Chrome DevTools pokaże nam to w taki sposób.
Ale oczywiście mając odwołanie do tego
elementu tutaj mógłbym się
do jego różnych właściwości i metod
odwoływać.
Pokażę Ci jeszcze, że możemy sobie np. znaleźć jakiś element w innym elemencie, czyli
mamy formularz, który ma identyfikator myForm, więc moglibyśmy sobie tutaj napisać
const form równa się document.querySelector
myForm i teraz nie szukamy już w całym
dokumencie, ale chcę wewnątrz tego konkretnego elementu znaleźć inny element.
Oczywiście mógłbym sobie tutaj dodać ten
selektor, powiedzieć, że szukam pola input nie ma problemu, ale czasami jest tak, że
mamy odwołanie do takiego elementu jakby z innego miejsca.
O tym jeszcze będzie później w kursie. Czyli np.
w zdarzeniu przechwytujemy tak zwany target i dostajemy w zasadzie taki sam obiekt.
Więc jeżeli chcemy wyszukiwać w jednym
elemencie innych elementów, to mogę sobie tutaj powiedzieć np.
input i odwołam się do form i na nim
mamy również metodę querySelector, czyli
na każdym elemencie, który masz, do którego masz odwołanie
również jest metoda querySelector i querySelectorAll. Nie tylko na dokumencie,
gdzie wyszukujemy jakby w całym dokumencie,
niezależnie nawet od samego body czyli w ogóle wszędzie wtedy wyszukujemy,
natomiast teraz szukamy tylko już w tym formularzu, który został tutaj zwrócony. I
chciałbym znaleźć sobie input, który ma name, firstName.
Jak to można zrobić? Mogę sobie coś takiego skopiować
i za pomocą CSS, czyli za pomocą ich selektorów
mogę tutaj podać name, ale będzie to wyglądać tak,
jeżeli szukamy po atrybucie, no u tu oczywiście nie możemy podawać w JavaScript
jednych cudzysłowów w drugich, więc należałoby to zapisać w ten sposób.
I teraz jeżeli zrobimy sobie console.log
tego input, zobacz, mamy dokładnie ten input. Ale nie
wyszukiwaliśmy już w całym dokumencie, tylko powiedzieliśmy konkretnie, że atrybut name
firstName na jakimś elemencie musi się znaleźć w tym formularzu.
I tak jak wspomniałem, to byśmy mogli również wyciąć i wstawić tutaj,
w tym przypadku efekt byłby ten sam, ale
chciałem Ci pokazać, że można wyszukiwać również w innych elementach.
Na koniec chcę Ci pokazać jeszcze kilka skrótów z części z nich
ja korzystam z części nie.
One są w zasadzie w Obiektowym Modelu Dokumentu
z tego powodu, że dawno były dodane
no i ze względów na wsteczną kompatybilność cały czas są.
To znaczy możemy się odwołać do document.forms
i to jest taki skrót, który zwróci nam wszystkie formularze.
Może zróbmy sobie to w console.log, to nam zwróci wszystkie formularze na stronie.
Jak widzisz otrzymamy jakąś kolekcję.
Jak to jest kolekcja, to oznacza, że zachowuje się jak tablica, czyli można się
też do niej odwoływać w ten sposób do elementów czy wykonywać np.
pętlę for
na takiej kolekcji. Mamy również coś takiego jak
zróbmy console.log(document.images), to nam zwraca wszystkie obrazki czy np.
document.links,
bardziej Ci to pokazuję w formie
ciekawostki niż z tego powodu, że jakoś specjalnie będziesz z tego korzystał.
Zachęcam Cię do korzystania zawsze z querySelector i querySelectorAll.
Jedyne skróty z jakich ja czasami korzystam to jest document.body
rzeczywiście jest to odwołanie od razu do
elementu body i zamiast robić po prostu dokument querySelector
i podawać body, można zrobić skrót document.body, zróbmy sobie to również w console.log
I czasami jak potrzebuję odwołanie do elementu html, czyli konkretnie do tego z
jakiegoś powodu chcę tutaj dodać jakąś klasę lub coś z tym zrobić, to możemy się
odwołać do tego poprzez document.documentElement.
Czyli to jest to samo co jakbyśmy zrobili
querySelector html to byłoby dokładnie to samo.
I na koniec jeszcze wspomnę tylko o tym, że możesz się spotkać w kodzie czy w
internecie gdzieś w różnych miejscach, ze starszymi metodami, które już od bardzo
dawna były w obiektowym modelu dokumentu i które nadal działają
niemniej jednak nie uważam, żeby był jakiś
powód, dla którego miałbyś z nich korzystać, ale są takie metody jak np.
document.getElementById i tu np.
podałbyś myFor i to będzie to samo co querySelector hash myForm.
Tu po prostu podajemy ID już bez tego hash, ale tylko po ID możemy wyszukiwać.
Jest coś takiego również jak document np.
getElementsByClassName i tu byśmy mogli podać klasę, czyli np.
wszystkie elementy z klasą text itd.
Jest kilka takich starszych metod, które były wcześniej dostępne.
Moim zdaniem nie ma powodu z nich korzystać
jeżeli wszystko możemy załatwić jedną metodą taką jak querySelector, która
zwróci nam jeden element lub querySelectorAll, która działa tak samo,
przyjmuje takie same selektory, ale zwraca nam kolekcję wielu elementów.
Zatem w ten oto sposób wyszukujemy elementów na stronie.
I teraz mając odwołanie już do takiego
formularza, bardzo wiele rzeczy możemy z nim zrobić.
Dodać mu jakieś klasy, przypisać do niego zdarzenia i tak dalej.
I tym będziemy się zajmować w lekcjach kolejnych.