Godzina 1 (dziś): DOM - strona jako drzewo obiektów
Godzina 2: znajdujemy element na stronie
Godzina 3: zmieniamy tekst i wygląd elementu
Godzina 4: podmieniamy atrybut - src, class
Godzina 5: dodajemy nowy element na stronę
Godzina 6: powtórka - łączymy wyszukiwanie, zmianę i tworzenie
Rozgrzewka · 3 minuty
Rozgrzewka: funkcje gotowe z poprzedniej lekcji
Co zwróci parseFloat("12abc")?
Do czego służy Math.round(x)?
Co obliczy Math.pow(2, 3)?
Część 1 · Co to jest DOM
DOM: Document Object Model - obiektowy model dokumentu
Skrót DOM (ang. Document Object Model, obiektowy model dokumentu) oznacza sposób, w jaki przeglądarka przechowuje Waszą stronę w pamięci - nie jako tekst, tylko jako zbiór połączonych ze sobą obiektów, do których ma dostęp JavaScript.
DOM to interfejs programistyczny dla dokumentów WWW: reprezentuje stronę tak, żeby programy mogły zmieniać jej strukturę, styl i treść - dokładnie to będziecie robić w kolejnych pięciu godzinach tego tematu.
Ciekawostka z Wikipedii: DOM nie zawsze był jednym wspólnym standardem. W latach 90. Netscape i Microsoft dodawały do swoich przeglądarek własne, niekompatybilne sposoby dostępu do struktury strony (tzw. wojna przeglądarek). Dopiero w 1998 roku W3C opublikowało pierwszy wspólny standard, DOM Level 1, który ujednolicił zasady dla wszystkich przeglądarek.
MDN: Web/API/Document_Object_Model/Introduction („The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.”, tłum. własne: „Document Object Model (DOM) to interfejs programistyczny dla dokumentów WWW. Reprezentuje stronę tak, że programy mogą zmieniać strukturę dokumentu, jego styl i treść.”)
Część 2 · HTML jako tekst kontra DOM jako żywa struktura
Plik na dysku to nie to samo, co strona w pamięci przeglądarki
Plik page.html to zwykły tekst - litery i znaczniki zapisane na dysku. Gdy przeglądarka go wczyta, buduje z niego DOM: drzewo obiektów w pamięci komputera. JavaScript nie zmienia pliku na dysku - zmienia właśnie ten DOM, czyli to, co przeglądarka aktualnie pokazuje na ekranie.
MDN: Web/API/Document_Object_Model/Introduction („The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document ... in memory.”, tłum. własne: „DOM łączy strony WWW ze skryptami lub językami programowania, reprezentując strukturę dokumentu ... w pamięci.”)
Część 3 · Drzewo dokumentu
Prosty dokument jako drzewo węzłów
MDN: Web/API/Document_Object_Model/Introduction („The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects.”, tłum. własne: „DOM reprezentuje dokument jako logiczne drzewo. Każda gałąź drzewa kończy się węzłem, a każdy węzeł zawiera obiekty.”)
Część 4 · document i document.body w konsoli
Zobaczcie DOM w narzędziach deweloperskich
// cały dokument - węzeł najwyższego poziomu drzewa
document
// element <body> i wszystko, co jest w nim zagnieżdżone
document.body
// nazwa znacznika elementu body, wielkimi literami
document.body.tagName // "BODY"// tekst ze znacznika <title> w <head>
document.title // "Moja strona"
Obiekt document to Wasz punkt wejścia do całego DOM - z niego dostaniecie się do każdego elementu strony. Właśnie te dwie linijki (document i document.body) wpiszecie za chwilę w ćwiczeniu.
MDN: Learn_web_development/Core/Scripting/DOM_scripting („The document ... is the actual page loaded into the window, and is represented in JavaScript by the Document object.”, tłum. własne: „document ... to faktyczna strona wczytana do okna, reprezentowana w JavaScript przez obiekt Document.”)
Część 5 · JavaScript zmienia DOM
JavaScript zmienia DOM, strona zmienia się bez przeładowania
Gdy skrypt zmienia DOM (np. tekst albo kolor elementu), przeglądarka od razu pokazuje efekt na ekranie - bez ponownego wczytywania całej strony. Dokładnie to poznacie na kolejnych godzinach: zmianę tekstu i wyglądu (godzina 3), atrybutu (godzina 4) i tworzenie nowych elementów (godzina 5).
MDN: Learn_web_development/Core/Scripting/DOM_scripting („developers like you can manipulate the DOM with JavaScript after the page has been rendered”, tłum. własne: „Wy, jako programiści, możecie manipulować DOM za pomocą JavaScript już po wyrenderowaniu strony.”)
Egzamin EE.09
Tak pytają na egzaminie
1.
DOM dostarcza metod i własności, które w języku JavaScript pozwalają na
manipulowanie zadeklarowanymi w kodzie łańcuchami.
wysłanie danych formularza bezpośrednio do bazy danych.
wykonywanie operacji na zmiennych przechowujących liczby.
pobieranie i modyfikowanie elementów strony wyświetlonej przez przeglądarkę.
2.
Aby za pomocą skryptu JavaScript zmienić wartość cechy elementu opisanej językiem CSS, należy posłużyć się szablonem zapisu