Document Object Model, wstęp
28 lutego 2006
JavaScript bywa nielubiany. Zwykle kojarzy się z czystym złem - tak zwanym DHTML-em, browser sniffing oraz brzydkimi rolloverami w menu. Czasem też z oknami popup i niedostępnymi linkami javascript:.
W oczach wielu ludzi technologia nie zmieniła się od ostatniej wojny przeglądarek. JavaScript bywa przez menadżerów projektów utożsamiany z brudną robotą wykonywaną w ciemności przez podstarzałych skrypciarzy w przepoconych swetrach. To wielka szkoda, bo od dość dawna mamy dostęp do tego, co ja nazywam nowoczesnym JavaScriptem.
Opiera się on na Document Object Model, w skrócie DOM. O ile sam JavaScript zawiera pętle, instrukcje warunkowe, sposoby pisania funkcji i tworzenia obiektów, to DOM jest zbiorem umownych nazw, określających wszystko co w dokumencie się znajduje i co może być na nim wykonane.
W realnym świecie dwóch ludzi na ulicy dużego miasta, mówiących tym samym językiem, jest w stanie się dogadać - wiedzą co to jest autobus, ulica, skrzyżowanie, przecznica, i tak dalej. Potrafią się odnieść do „drugiego przystanku” za aktualnym, „skręcenia w prawo, a później w lewo”. DOM jest zbiorem takich opisów, dzięki któremu możemy się poruszać po wirtualnym mieście - dokumencie.
Podobnie jest na stronie internetowej. DOM jest swego rodzaju API - językiem w którym możemy porozumieć się z przeglądarką i wykonać określone operacje na dokumencie. Odwołujemy się do zbiorów elementów jak images, znajdujemy unikalny element za pomocą getElementById, element rodzic za pomocą parentNode. Wszystkie te magiczne nazwy są metodami oraz obiektami przy pomocy których jesteśmy w stanie wyczyniać cuda.
Model dokumentu opisanego za pomocą DOM jest przedstawiany za pomocą drzewa, w którym elementy są połączone relacjami. Przykładowa strona po załadowaniu do przeglądarki zamienia się w obiekt-drzewo:
Zrozumieć, że strona jest takim drzewem i podczas pisania znaczników rozwijamy stare gałęzie i tworzymy nowe jest tak samo ważne jak pojęcie różnicy między elementem blokowym a liniowym podczas zwyczajnego webdesignu.
Do czego DOM się może przydać? Za jego pomocą jak już wspomniałem możemy sięgnąć dowolnego „znacznika” na stronie i zmienić go. Dodać nowe elementy pod nim, nad nim, obok niego. Gdy wziąć pod uwagę, że nowoczesne przeglądarki wspierają DOM o wiele lepiej niż CSS, możemy czasem tworzyć workaroundy działające tak jak sobie tego życzymy wszędzie. I wreszcie - poznawszy DOM jesteśmy w stanie operować na jakimkolwiek modelu dokumentu, niekoniecznie HTML. Metoda setAttribute("class","wartość") jest uniwersalna, w odróżnieniu od .className dla dokumentów HTML. :)
Ktos 1
28 lutego 2006, 17:19
Jam Łasica 2
28 lutego 2006, 17:42
olórin 16
28 lutego 2006, 22:43