W kolejnych odcinkach często będę używać skrótu "DOM".
Dom, dom, dom.
DOM to obiektowy model dokumentu (Document Object Model).
Z jego pomocą przeglądarki
pozwalają projektantom zmieniać strony poprzez JavaScript.
Ładując stronę internetową,
przeglądarka analizuje HTML i CCS,
i konwertuje dokument w DOM.
Ten DOM - to duży obiekt JavaScript,
zawierający wszystko, co chcemy wiedzieć o stronie
lub w niej zmienić. Każdy tag, jego atrybut i styl.
Żeby wejść do DOM-u na stronie,
z poziomu JavaScript, korzystamy z globalnej zmiennej "document".
Możemy używać właściwości
i przywoływać funkcje powiązane z tym obiektem.
Generalnie modyfikacji DOM-ów
dokonujemy w dwóch krokach.
Wypiszę je tutaj.
Już... I drugi krok.
Omówmy teraz każdy z nich.
Pierwszy krok - to znaleźć węzeł DOM-u
z użyciem metody dostępu.
Jeśli szukamy tylko tagu "body",
łatwo zyskamy dostęp do niego,
wpisując po prostu "document.body".
Drugi krok - to modyfikacja znalezionego węzła
poprzez zmianę atrybutów, stylów, wewnętrznego HTML,
dołączanie nowych węzłów...
Chcąc zamienić zawartość całego tagu,
użyjmy właściwości "innerHTML".
`document.body.innerHTML = "Webpage be gone!" (Strono precz!).
Ha! Udało się!
Przeglądarka szuka zmian w dokumencie obiektowym.
Gdy widzi, że zmieniacie "innerHTML" w "document.body",
odzwierciedli to w dokumencie.
Pamiętajcie, dokument obiektowy to nie jest strona internetowa,
lecz jej odzwierciedlenie, które tworzy przeglądarka.
Jest więcej sposobów na wykonanie kroku pierwszego,
bo zwykle interesuje was więcej niż tag "body".
Może szukacie tagu z pewnym ID, albo wszystkich tagów danego typu...
To omówię w odcinkach na temat metod dostępu do modelu DOM.
Ciekawsze rzeczy można też robić w kroku drugim,
np. zmieniać atrybuty i style znalezionych tagów.
Pomówimy o tym w odcinkach nt. modyfikacji DOM-u.
Gdy opanujecie dostęp i modyfikacje,
przejdziemy do świetnych zastosowań,
np. reakcji na zdarzenia użytkownika czy animacji.
Głupio, że używamy JavaScript do robienia tego,
co można było załatwić HTML-em,
ale najpierw dobrze opanujcie dostęp do DOM-u i zmiany,
żeby później robić prawdziwe interaktywne rzeczy.
Ćwiczcie - i do zobaczenia!