DOM - Obiektowy Model Dokumentu.
1. DOM jest to sposób reprezentacji złożonych dokumentów XML i HTML w postaci modelu obiektowego. Model ten jest niezależny od platformy i języka programowania. Innymi słowy jest to graficzne odwzorowanie elementów strony na wykresie w formie drzewa:
2. Standard W3C DOM definiuje zespół klas i interfejsów, pozwalających na dostęp do struktury dokumentów oraz jej modyfikację poprzez tworzenie, usuwanie i modyfikację tzw. węzłów (ang. nodes).
3. Dla większości języków programowania istnieją biblioteki obsługujące DOM dla plików XML. Najbardziej zaawansowane z nich to Apache Xerces i MS XML. Standard W3C definiuje interfejsy DOM tylko dla języków JavaScript i Java.
4. Standaryzacja. W3C przygotowała ujednolicony standard obiektowego modelu dokumentu, wewnętrznie podobny do wersji Microsoftu, choć o innym interfejsie programistycznym – dostęp do elementów dokumentu możliwy jest tu poprzez wywołanie odpowiedniej metody – np. document.getElementById().
5. Poziomy DOM:
a) "DOM Level 0" - model z przeglądarki Netscape Navigator 3.0, skopiowany przez Microsoft i zaimplementowany we wszystkich przeglądarkach internetowych, mimo że nie stanowi oficjalnego standardu W3C. Zapewnia prosty dostęp głównie do elementów formularzy i obrazków.
b) DOM Level 1 - dostępny z poziomu JavaScriptu w przeglądarkach internetowych oraz w wielu innych językach programowania. Poziom ten odpowiada za dostęp do treści dokumentu poprzez tworzenie, modyfikowanie i dołączanie węzłów i atrybutów.
c) DOM Level 2 - dostępny w większości współczesnych przeglądarek internetowych oraz w wielu językach programowania. Poziom ten odpowiada m.in. za obsługę zdarzeń i przestrzeni nazw.
d) DOM Level 3 składający się z sześciu specyfikacji:
- Core
- Load and Save
- XPath
- Views and Formatting
- Requirements
- Validation
6. Aby odwołać się do elementów strony stosujemy:
a) getElementById,
b) getElementsByTagName,
c) querySelector
Przykład: Jest dana strona:
Ten napis zawiera pogrubiony tekst
jakaś treść
o kodzie:
<p id="paragraf">Ten napis zawiera <strong id="bold">pogrubiony tekst</strong></p>
<p> jakaś treść </p>
Odwołujemy się do elementu <p> za pomoca elementów:
a) document.getElementById('paragraf') - //wskazuje na konkretny akapit
b) document.getElementsByTagName('p') - //kolekcja akapitów
c) document.getElemensByTagName('p')[0] - //wskazuje na pierwszy akapit
d) document.getElemensByTagName('p')[0].getElementsByTagName('strong')[0] - //pobieramy pierwszy akapit, a w nim pobieramy pierwszy strong
Odwołujemy się do elementu <strong> za pomoca elementów:
a) document.getElementById('bold') - //wskazuje na nasz znacznik strong
Efekt końcowy: