HTML DOM-HİYERARŞİK YAPI

DOM(Document Object Model - Doküman nesne modeli): Tüm tarayıcıların bir HTML belgesini okurken/Görüntülerken kullandığı/Oluşturduğu nesnel yapı

CSS’in güçlü olmasının en büyük nedeni (X)HTML elementleri arasındaki ilişkiden yararlanmasıdır. (X)HTML dökümanları gizli bir hiyararşi ile oluşturulur. Bu hiyerarşi içinde tüm (X)HTML elementleri kendilerine uygun bir yer bulur. Bu ilişkiyi biz soy ağacına benzetebiliriz.

Yukarıdaki (x)html yapısını bir soy ağacı gibi düşünüp değerlendirirsek:

Bir elementin ebeveyn(anne-baba) olduğunu anlamak için o elementin altında başka element olup olmadığına bakmalıyız, eğer varsa o element ebeveyndir.

Yukarıdaki şekilde birinci sıradaki p elementine dikkat edelim. P bir ebveyn'dir çünkü altında strong,b,em,i elementleri bulunmaktadır.b'de bir ebeveyndir ki onun altında em elementi vardır.

Bir elementin çocuk element olduğunu anlamak için de üstünde bir elementin olup olmadığına bakarız. Yani yukarıdaki olayın tersi. Buna göre strong elementi p elementinin bir çocuğudur. Daha karmaşık yapılarda ata(ancestor) ve torun(descendant) ilişkisi vardır. Aradaki fark eğer bir element diğer elementin tam olarak bir seviye üstünde ise o ata diğeride torun durumundadır. Yukarıdaki şekili incelersek ilk section elementinin dört adet p çocuk elementi bulunmaktadır ve bu dört p elementinin altındaki tüm elementler ilk section elementinin torun elementleridir.