DOM – Document Object Model

DOM – obiektowy model dokumentu.

interfejs programowy aplikacji (API) wbudowany w przeglądarkę www.

 

Obiekty w DOM mają:

• właściwości – zmienne opisujące stronę www lub dokument
• metody – funkcje do manipulowania elementami

 

Wyznaczanie elementu, odwołanie się do obiektu

poprzez wskazanie obiektu nadrzędnego oraz nazwa (lub nazwy) obiektu potomnego oddzielone .

window.document.myImage

document.forms.contact – <form name=”contact”>

 

Hierarchi DOM

• window (parent, frames[], self, top)
  • location
  • history
  • document
    • links[]
    • anchors[]
    • images[]
    • obiekty DOM level1
    • forms[]
      • elementy formularza

 

metoda obiektu window – window.alert() lub alert()

 

Węzły

właściwości:

• style – zmiana wartości styli
• nodeName – nazwa węzła,
  • węzły oparte na znacznikach html – nazwa to nazwa znacznika,
  • węzły dokumentów – nazwa to kod #document
  • węzły tekstowe – #text
• nodeType – wartość całkowita, typ węzła
  • 1 – zwykłe znaczniki html
  • 3 – węzły tekstowe
  • 9 – węzły dokumentu
• nodeValue – tekst zawarty w węźle tekstowym, inne typy węzłów nie mają tej właściwości
• innerHTML – treść html węzła
• id – identyfikator węzła
• classname – wartość atrybutu class węzła

 

właściwości relacji węzłów

• firstChild – pierwszy obiekt potomny węzła
• lastChild – ostatni obiekt potomny węzła
• childNodes – tablica węzłów potomnych danego węzła, użycie pętli pozwala zadziałać na wszystkich węzłach wewnątrz danego obiektu (ul.childNodes.length)
• previousSibling – węzeł równorzędny przed bieżącym
• nextSibling – węzeł równorzędny po bieżącym
• parentNode – obiekt zawierający bieżący węzeł

 

właściwości przesunięcia

• offsetLeft – odległość od lewej krawędzi okna przeglądarki lub obiektu zawierającego dany węzeł do lewej krawędzi obiektu węzła
• offsetTop – odległość od górnej krawędzi okna przeglądarki lub obiektu zawierającego dany węzeł do górnej krawędzi obiektu węzła
• offsetHeight – wysokość obiektu węzła
• offsetWidth – szerokość obiektu węzła

 

Metody dokumentu

• document.getElementById() – zwraca element o atrybucie id
• document.getElementsByTagName(znacznik) – zwraca tablica zawierająca elementy o podanej nazwie znacznika
  • symbol wieloznaczny * pozwala otrzymać tablicę wszystkich węzłów dokumentu
• document.createTextNode(tekst) – tworzy nowy węzeł tekstowy zawierający podany tekst
• document.createElement(znacznik) – tworzy nowy element html, po utworzeniu można go dodać do dokumentu
• document.documentElement – obiekt reprezentujący sam dokument, pozwala na odczyt informacji o dokumencie

 

Metody węzłów

• appendChild(nowy) – dołącza wskazany nowy węzeł po wszystkich istniejących węzłach obiektu
• insertBefore(nowy, istniejący) – wstawia nowy węzeł potomny przed wskazanymi istniejącymi węzłami potomnymi
• replaceChild(nowy, stary) – zastępuje wskazany węzeł nowym
• removeChild(węzeł) – usuwa wskazany węzeł
• hasChildNodes() – zwraca true jeśli obiekt ma węzeł/węzły potomne
• cloneNode() – tworzy kopię istniejącego węzła
  • przekazanie do metody parametr true – kopia będzie zawierać również wszystkie węzły potomne oryginału
• getAttribte(nazwa atr) – pobiera wartość wskazanego atrybutu, zapisuje w zmiennej
• setAttribute(nazwa atr) – ustawia wartość atrybutu
• removeAttribute(nazwa atr) – usuwa dany atrybut
• hasAttributes() – true jeśli węzeł ma atrybuty, false jeśli nie ma.