Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

DOM - model obiektowy dokumentu

Przeglądarka przed wyświetleniem strony tworzy jej obiektowy model (DOM — Document Object Model), czyli strukturę obiektów reprezentujcych wszystkie elementy HTML znajdujące się na stronie. Każdy element — np. p, div, section itd. — ma w tym modelu swoją reprezentację w postaci osobnego obiektu.

DOM, czyli Obiektowy Model Dokumentu udostępnia nam wiele metod do pracy z obiektami HTML z poziomu kodu JavaScript. Możemy do takich elementów się odwoływać, przypisywać im wartości czy też treść, dodawać lub usuwać klasy i atrybuty, a także dynamicznie tworzyć nowe elementy i wstawiać je na stronę. Użyłem chcąc niechcąc kilku terminów, które poznasz dopiero ucząc się JavaScript.

DOM tworzy drzewo. Drzewo to zawiera wiele rodzajów węzłów (nodes). Dokument jest więc zbiorem węzłów. Węzły mogą zawierać kolejne podwęzły itd. Głównym elementem zwanym korzeniem (root) jest html, który zawsze znajduje się na najwyższym szczeblu hierarchii dokumentu HTML5.

W dalszym toku nauki będziemy zamiennie używali określeń znacznik, element oraz obiekt.

Ćwiczenie 1_3_0_1

Otwórz stronę prezentującą końcowy etap przykładu analizowanego na poprzednich zajęciach. Przeanalizuj układ znaczników, w kontekście DOM.
W swojej analizie pomiń znacznik, którego na razie nie rozumiesz - <script src="../html5.js"></script> - jest on związany z JavaScript. Znacznik <link rel="stylesheet" type="text/css" href="style.css" />, jest związany z zewnętrznym arkuszem stylów CSS i został na schemacie nazwany style, natomiast znaczniki a to odsyłacze (linki).

DOM - Obiektowy Model Dokumentu
Rysunek 1_3_0_1. DOM - obiektowy model przykładowego dokumentu.

Praca domowa

Otwórz stronę prezentującą końcowy etap przykładu analizowanego na poprzednich zajęciach. Otwórz źródło strony i narysuj w zeszycie DOM tego dokumentu. Nie spoglądaj w trakcie pracy na rysunek pokazany powyżej, potraktuj ten rysunek jako możliwość sprawdzenia, czy poprawnie wykonałeś zadanie.