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.