DOM (Document Object Model – Obiektowy model dokumentu) – jest to sposób przedstawienia elementów znajdujących się na stronie internetowej w postaci obiektów, które możemy obrabiać za pomocą np. języka JavaScript. Obiektowy model dokumentu umożliwia przetwarzanie złożonych dokumentów XML i XHTML w postaci obiektów. DOM jest w stanie przetwarzać także pliki CSS. Model DOM jest niezależny od języka w których programujemy oraz platformy. Metody DOM są dostępny nie tylko w JavaScript. Tak samo można operować na m.in. w Java lub PHP5.
Używany jest do uzyskiwania dostępu oraz aktualizacji zawartości, stylu oraz struktury dokumentów XML i XHTML. Model obiektu składa się z obiektów, właściwości, metod i zdarzeń, które mogą reprezentować oraz wpływać na składniki dokumentu. Model DOM umożliwił programistom szybkie i łatwe wykorzystanie plików XML w celu przechowywania danych.
Model przechowuje dane XML w strukturze hierarchicznej, podobnej do drzewa. Document Object Model umożliwia dostęp do każdego składnika dokumentu. Także do jego elementów, atrybutów, instrukcji przetwarzania, komentarzy oraz deklaracji jednostek. Do modelu może być załadowany dowolny dokument XML. Po załadowaniu dokumentu do modelu, dokument XML jest czytany od początku do końca i przechowywany w modelu DOM jako model węzłów.
Document Object Model nie istniał w pierwszych przeglądarkach. Twórcy najpopularniejszych przeglądarek internetowych takich jak Microsoft czy Netscape tworzyli własne, niezgodne ze sobą modele. Organizacja W3C przygotowała standard obiektowego modelu dokumentu. Podobny do wersji Microsoftu. Współczesne przeglądarki internetowe z każda kolejna wersją coraz lepiej obsługują model DOM zgodny ze standardami W3C.
Model DOM przyczynił się do powstania nowych technologii, jak np. AJAX (Asynchronous JavaScript and XML). AJAX jest to technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowania całej strony. AJAX wykorzystywany jest obecnie bez integracji z plikami XML. Rozwój AJAXa zawdzięczamy modelowi DOM.
Istnieje kilka poziomów modelu DOM:
- DOM LEVEL 0 (nieoficjalny) – jest to model przeglądarki Netscape 3.0. Później skopiowany przez Microsoft. Nie jest oficjalnym standardem W3C. Umożliwia dostęp tylko do pól formularzy.
- DOM LEVEL 1 – umożliwia dostęp do treści dokumentu tworzenie, modyfikowanie i dodawanie elementów i atrybutów.
- DOM LEVEL 2 – poziom wprowadza obsługę zdarzeń
- DOM LEVEL 3 – na poziom trzeci składa się kilka elementów:
- DOM LEVEL 3 Core
- DOM LEVEL 3 Load and Save
- DOM LEVEL 3 XPath
- DOM LEVEL 3 Views and Formatting
- DOM LEVEL 3 Requirements
- DOM LEVEL 3 Validation
Podstawowe metody można wywołać na dowolnym elemencie dokumentu lub na samym obiekcie:
document.
Element można odnajdywać np. po identyfikatorze, nazwie elementu czy nazwie tagu.
Aby odnaleźć element po identyfikatorze musimy przypisać document.getElementById do zmiennej:
var obj = document.getElementById(‘obj’);
Podobnie robimy z nazwą elementu i nazwą taga:
var obj = document.getElementByName(‘obj’);
lub:
var obj = document.getElementByTagName(‘obj’);
Należy uważać na pisownie małych i wielkich liter.
Aby utworzyć element wpisujemy:
var obj = document.createElement(‘obj’);
W ten sposób utworzymy element, ale nie będzie on dodany do dokumentu. Aby element pojawił się w dokumencie musimy użyć funkcji appendChild, która dołącza element na koniec dokumentu:
document.body.appendChild(obj);