Backend, Juniors

DOM. Kolejny krok w karierze początkującego JavaScript developera

Javascript

Podczas nauki JavaScriptu na pewno doszedłeś do etapu, gdy usłyszałeś o DOM, a dokładniej o obiektowym modelu dokumentu. Za pomocą DOM możesz zmieniać wygląd strony internetowej, dzięki skryptom JS. Jeszcze prościej mówiąc: DOM jest odzwierciedleniem strony, bo przeglądarka analizując HTML i CSS konwertuje go właśnie w DOM. Dzisiaj pokażę, jak z niego korzystać.


Kazimierz Szpin. Autor bloga ModestProgrammer.pl, inżynier informatyki, programista. Specjalizuje się w języku C# głównie WPF, Windows Forms oraz ASP.NET MVC. W wolnych chwilach tworzy różne aplikacje, a także rozwija się z różnych dziedzin programowania. Przerobił mnóstwo kursów oraz przeczytał wiele książek programistycznych, których recenzje możesz znaleźć na jego blogu.


Każdy element HTML wewnątrz DOM’u jest nazywany węzłem. Węzły mogą mieć rodziców, rodzeństwo oraz potomków. Zaprezentuje Ci przykładowy kod html, a na nim opiszę pokrewieństwo pomiędzy węzłami:

W powyższym kodzie nie ma nic skomplikowanego. Na górze znajduje się standardowa sekcja head, a poniżej body. W body jest div container, a w nim znajdują się dwa przyciski: „zapisz” oraz „anuluj”. Poniżej jest jeszcze odwołanie do pliku ze skryptami JS. Na powyższym przykładzie container jest potomkiem body, ale również jest rodzicem buttona „zapisz” oraz buttona „anuluj”. Oba buttony są rodzeństwem.

Dzięki językowi JavaScript, możesz wyszukiwać elementy w drzewie, a następnie je modyfikować. Możesz również stworzyć i wstawić na stronę nowy element, a nawet modyfikować style CSS. Jeżeli chcesz podejrzeć drzewko DOM wybranej strony internetowej, wystarczy w przeglądarce kliknąć przycisk F12, a następnie w zależności od przeglądarki przejść w zakładkę Elementy (w Chrome) albo Inspektor (w Firefox’ie).

W ten sposób możesz dynamicznie modyfikować wartości różnych węzłów. Pora przejść do praktyki. Poniżej pokażę Ci jak pobierać konkretne elementy z drzewa DOM i jak je modyfikować.

Na początku tego artykułu wspomniałem, że DOM możesz traktować jako zwykły obiekt. Zatem każdy obiekt ma swoje właściwości oraz metody. I tak samo jest również z DOM:

Dzięki takiemu zabiegowi, zmieni się tytuł Twojej strony (widoczny w nagłówku). Jest kilka metod, dzięki którym możesz pobrać konkretny element jaki Cię interesuje. Zacznijmy od metody querySelector.

Metoda querySelector przyjmuje jako parametr takie same selektory jakich używasz w CSS i zwraca 1 element pasujący do selektora. Dzięki tej metodzie pobraliśmy div z id container i ten div został przypisany do zmiennej container. Od tej pory wszystkie zmiany na zmiennej będą zmieniać drzewo DOM. Tak jak we wszystkich obiektach w JavaScript, do właściwości oraz metod obiektu DOM możesz odwoływać się po kropce.

Dzięki właściwości innerHTML możesz wstawić wewnętrzny html do div. Teraz na stronie wyświetli się tylko jeden przycisk — „Nowy przycisk”, ponieważ nadpisał on dwa stare przyciski. Oczywiście również możesz dodać nowy przycisk do pozostałych, bez nadpisywania. Używając do tego znanej Ci już składni:

Dzięki takiemu zapisowi nowy przycisk zostanie dodany na stronę, bez nadpisywania pozostałych, które zostały już dodane wcześniej.

Kolejną ciekawą metodą do pobierania elementów z drzewa DOM jest metoda querySelectorAll, która różni się tym od metody querySelector, że pobiera wszystkie pasujące elementy. W przypadku querySelector był pobierany tylko 1 dopasowany element.

W naszym wypadku zmienna buttons, a właściwie tablica buttons będzie zawierać 2 elementy, dwa przyciski: zapisz oraz anuluj. Do tych elementów możesz odwoływać się za pomocą indeksów lub za pomocą pętli, które opisywałem we wcześniejszych artykułach.

Taki zapis zmieni teksty wyświetlane na pobranych wcześniej przyciskach.

Myślę, że dwie powyższe metody pobierania elementów są najbardziej popularne, ale przedstawię Ci jeszcze trzy inne metody, które mogą Ci się przydać.

Dzięki metodzie getElementById możesz pobrać element po podanym w parametrze id.

Powyższym sposobem pobraliśmy element po id, tym razem był to przycisk o id zapisz, a następnie dla tego przycisku został ustawiony kolor tła na biały.

Podobnie za pomocą metody getElementsByClassName możesz pobrać elementy, które posiadają daną klasę. Zostaje zwrócona kolekcja elementów.

Musisz pamiętać, że podobnie jak w metodzie querySelectorAll do zmiennej zostanie przypisana kolekcja pasujących elementów.

Ostatnia metoda, jaką przedstawię to metoda getElementsByTagName.

Dzięki powyższej metodzie zostaną pobrane wszystkie buttony ze strony, a następnie każdemu z nich zostanie przypisany kolor czcionki -+ czerwony.

Na koniec przypomnę Ci o tym, że pobrany przez Ciebie element może nie istnieć na stronie, wówczas zostanie zwrócony null.

Warto zawsze zabezpieczać się przed takimi sytuacjami, na przykład używając do tego instrukcji warunkowej:


najwięcej ofert html

Artykuł został pierwotnie opublikowany na blogu modestprogrammer.pl.

Podobne artykuły