Każda strona www posiada pewną hierarchię, jest zbudowana na drzewie DOM, czyli na “obiektowym modelu dokumentu”.

Prościej mówiąc: każda strona to jedno wielkie drzewo, które posiada liście i gałęzie (poszczególne elementy, np. p, div, head, body itd.).

Dzięki takiej strukturze, w JavaScript możemy w prosty sposób wybierać elementy HTML i wykonywać na nich działania.

Możesz wybrać element, który ma id “pojemnik1”, wszystkie elementy z klasą “color-red” czy nawet ich dzieci lub rodziców, a potem dodać im klasę, zmienić kolor czy usunąć.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Wersja wideo:

 

Obiekty window i document, które stoją na czele tej hierarchii, mają specjalne wbudowane funkcje, dzięki którym możemy wybierać poszczególne elementy na stronie.

Na wideo instalujemy dodatkowo Bootstrapa, by szybko zbudować prostą stronę.

Każdy wpis na blogu jest bardziej podsumowaniem filmu, więc zamieszczę tutaj kluczowe informacje, by łatwo było to sobie powtórzyć.

Wybieranie elementów HTML

Sposób 1. Na podstawie ID

getElementById()

Wybierz element z id “lista-artykulow”:

Sposób 2. Na podstawie nazwy klasy

getElementsByClassName()

Wybierz wszystkie elementy z klasą “jumbotron”:

Sposób 3. Na podstawie tagów

getElementsByTagName()

Wybierz wszystkie tagi “p”:

Sposób 4. querySelector

Nowy sposób, który umożliwia proste budowanie zapytań tak, jakbyś robił to w CSS. W rezultacie zwraca pierwszy znaleziony element HTML.

Dla przykładu wybierzmy sobie wszystkie elementy p wewnątrz klasy “jumbotron”, która to jest wewnątrz diva o id “lista-artykulow”.

W przypadku poprzednich metod byłoby to całkiem skomplikowane, ale tutaj jest bardzo proste.

Jak pisałem wyżej – zostanie wybrany tylko pierwszy element, ale rozwiązaniem jest querySelectorAll.

Sposób 5. querySelectorAll

Jedyna różnica jest taka, że zamiast pierwszego znalezionego elementu, zwraca wszystkie.

Zagnieżdżanie zapytań

Możesz także “zagnieżdżać” zapytania, to znaczy najpierw wybierasz jakąś listę elementów i przypisujesz ją do zmiennej, a potem możesz wybierać z niej dalsze elementy.

Dla przykładu najpierw listę artykułów przypiszemy do zmiennej, a potem wybierzemy wszystkie jumbotrony:

 

Wybieranie dzieci i rodziców

Gdy masz już wybrane elementy, możesz np. wybrać pierwsze dziecko lub ostatnie dziecko (czyli pierwszy i ostatni element danego rodzica).

Przykłady

Załóżmy, że mamy już gotową listę artykułów, jak powyżej.

Wybierz pierwsze dziecko z listy artykułów:

Ostatnie dziecko:

Wybierz rodzica listy artykułów:

Wybierz wszystkie dzieci wewnątrz listy artykułów:

 

Klasy i style

W każdym wybranym elemencie możesz dodać, usunąć klasę lub sprawdzić czy dana klasa istnieje.

Dodaj klasę “text-uppercase”:

Dodaj 2 klasy na raz:

Usuń klasę “text-uppercase”:

Sprawdź czy dana klasa istnieje:

Wynikiem będzie true lub false, wyświetlone w konsoli.

 

Aby dodać style do elementu, wykorzystaj właściwość style.

 

Dodawanie i usuwanie elementów

Dodajmy element, a potem zmodyfikujmy jego style oraz klasy:

Aby taki element usunąć, musimy znać jego rodzica, ponieważ wykorzystujemy metodę removeChild (usuń element-dziecko):

 

Na koniec możesz taki element dołączyć do drzewa DOM, np. na końcu body, wykorzystując appendChild:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • >