Obiektowy Model Dokumentu - DOM

Obiektowy Model Dokumentu (DOM)

 

Model obiektowy dokumentu (DOM) to API dla dokumentów HTML. Zapewnia ono strukturalną reprezentację dokumentu, pozwalając na modyfikację jego zawartości i wizualnej prezentacji. W gruncie rzeczy, DOM łączy strony internetowe ze skryptami lub językami programowania.

Wszystkie właściwości, metody i zdarzenia dostępne dla twórcy stron internetowych, służące do manipulowania i tworzenia stron zorganizowane są w obiekty (np. obiekt document reprezentujący dokument, obiekt table odpowiadający za tabele w HTML itp.) Obiekty te dostępne są poprzez języki skryptowe w większości współczesnych przeglądarek.

DOM używany jest zazwyczaj w połączeniu z JavaScriptem. Oznacza to, że kod pisany jest w JavaScript, ale DOM wykorzystywany jest by uzyskać dostęp do strony internetowej i jej elementów. Jednakże DOM zaprojektowano tak, by był niezależnym od konkretnego języka programowania, tworząc strukturalną reprezentację dokumentu poprzez jedno, spójne API. Mimo że na tej stronie skupimy się na JavaScripcie, implementacje DOM można stworzyć dla dowolnego języka.

Konsorcjum W3C stworzyło standard DOM, nazywany W3C DOM. Powinno to, dzięki poprawnej implementacji w większości przeglądarek, pozwolić na tworzenie aplikacji o dużych możliwościach dla różnych przeglądarek.

W momencie gdy przeglądarka interpretuje przykładowy kod html:

 

<!DOCTYPE html>

<html lang="pl-PL">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>DOM</title>

</head>

<body>

<ul>

<li>element 1</li>

<li>element 2</li>

<li>element 3</li>

<li>element 4</li>

</ul>

<p class="akapit">Lorem ipsum...</p>

</body>

</html>

 

Tworzy z niego interpretację w pamięci jako drzewko obiektów w następujący sposób:

 

Na powyższym przykładzie widać następujące cechy. Do drzewka dokumentu należą elementy: znaczniki, atrybuty oraz tekst. I na tych elementach możemy wykonywać poszczególne operacje.

Wymieńmy sobie podstawowe metody służące do odwoływania się do konkretnych elementów w drzewie DOM: