Czym jest Document Object Model czyli Obiektowy Model Dokumentu?

Jest logiczną strukturą dokumentu HTML i XML w postaci hierarchicznej listy węzłów. Struktura węzłów jest ułożona w postaci struktury drzewa, w której każdy węzeł jest obiektową reprezentacją części dokumentu. Każda gałąź dokumentu prowadzi do węzła, a każdy węzeł posiada obiekt danych HTML. Dzięki temu mamy dostęp do obiektów. DOM umożliwia poprzez swoje metody na manipulację tymi obiektami. Metody dają nam dostęp do manipulacji tagami, atrybutami, selektorami identyfikatora, selektorami klas oraz wieloma innymi.

Struktura Document Object Model w skrócie DOM

Możemy sobie wyobrazić DOM jako drzewo z gałęziami, całe drzewo jest właśnie strukturą dokumentu HTML, a poszczególne gałęzie jego węzłami. Dokument jest tworzony z udziałem obiektów, które tworzą poszczególne elementy dokumentu takie jak tagi i atrybuty HTML.

Jak wygląda struktura drzewa DOM

Drzewo posiada root czyli korzeń. Jest to główny obiekt w dokumencie o nazwie Window, następnie węzeł prowadzi do kolejnego obiektu o nazwie Document i zakładając np. że posiadamy na stronie linki, oraz formularz to poszczególne gałęzie drzewa będą rozchodzić się na linki, formularz oraz kotwice, z czego formularz będzie posiadać kolejne węzły t.j. gałęzie prowadzące do obiektów textarea, checkbox, radio, select, reset, button, oraz z select kolejna gałąź prowadzi do obiektu option.