DOM (ang. Document Object Model)

Metody DOM są dostępne nie tylko w JavaScript. Tak samo można operować na dokumentach m.in. w Javie i PHP5.

DOM to sposób przedstawienia dokumentu. Jest to zestaw metod i pól, które umożliwiają odnajdywanie, zmienianie, usuwanie i dodawanie elementów.

DOM W3C jest podzielony na dwie części. Pierwsza, podstawowa (ang. core) to ogólny sposób reprezentowania dokumentów XML. Przedstawia dokument jako drzewo zawierające węzły (ang. node). Każdy węzeł może być elementem, fragmentem tekstu, komentarzem, instrukcją preprocesora (np. dołączonym fragmentem PHP) albo encją.

Drugą częścią DOM W3C jest typowy dla przeglądarek DOM HTML. Jest to zestaw metod ułatwiających tworzenie dynamicznych stron oraz zapewniających kompatybilność wstecz z wcześniejszym prostym DOM Netscape. DOM HTML przedstawia dokument jako kilka kolekcji obiektów określonych typów (np. formularze, obrazki) oraz dodaje pola/metody ułatwiające dostęp do funkcjonalności specyficznej dla HTML, jak np. odczyt pól formularza.

Podstawowe obiekty

Głównym, globalnym obiektem w DOM przeglądarki jest window. W tym obiekcie przechowywane są wszystkie globalne zmienne i funkcje. W nim znajduje się także obiekt document, który preprezentuje całą stronę XHTML.

document.documentElement to jest główny element dokumentu (korzeń), czyli <html>. document.body to obiekt reprezentujący <body> dokumentu.

Odnajdywanie elementów

Podstawowe metody DOM W3C można wywołać na dowolnym elemencie dokumentu lub na samym obiekcie document.

Po identyfikatorze

Uwaga na pisownię wielkich i małych liter!

Jeśli element ma identyfikator, to można go znaleźć za pomocą getElementById(id)

  var foo = document.getElementById('foo')
  if (!foo) alert('nie ma foo!')

Po nazwie elementu

Nie należy tego mylić z getElementsByName(), które działa na podstawie atrybutu name

getElementsByTagName(nazwa) zwraca kolekcję wszystkich elementów, które mają określoną nazwę. Jeśli poda się * zamiast nazwy, to zwróci wszystkie elementy. Zauważ, że możesz wywołać tę metodę na dowolnym elemencie i wtedy poda tylko elementy zawarte w nim:

  var bary = foo.getElementsByTagName('bar')
  bary będzie kolekcją (tablicą) wszystkich elementów o nazwie bar wewnątrz elementu reprezentowanego przez obiekt foo

Kolekcje

Kolekcje używa się tak, jak tablice:

 for (x in bary)
 bary[x]

Kolekcje są „żywe” i reagują na zmiany w dokumencie. Przy ich używaniu trzeba mieć na uwadze, że jeśli element zostanie usunięty z dokumentu, to zniknie także ze wszystkich kolekcji.

Wg określonej klasy

DOM W3C nie ma metody do wyszukiwania elementów wg klasy, ale można łatwo taką metodę napisać.

 @@function getElementsByClass(className) {
 var i,pasujace,odnosniki = document.getElementsByTagName('*')
 for (i in odnosniki) {
 @@if (odnosniki[i].className==className pasujace[pasujace.length] = odnosniki[i];
 }
 }

Skakanie po węzłach (elementach)

Riddle jezeli to czytasz, mółgbys dać ilustracje z bloga do tego, jeżeli nie sprawia Ci to problemu :)

Nie potrzeba dawać identyfikatorów dla wszystkich elementów w dokumencie. Każdy węzeł (czyli element, fragment tekstu, komentarz), posiada pola wskazujące na jego sąsiednie węzły:

Nazwa polaElement
firstChildPierwszy węzeł zawarty w tym elemencie
lastChildOstatni węzeł w tym elemencie
previousSiblingSąsiedni węzeł przed tym elementem
nextSiblingWęzeł za tym elementem
parentNodeElement, w którym zawarty jest ten element
childNodesKolekcja wszystkich węzłów zawartych w tym elemencie

Pola mogą mieć wartość null, gdy nie ma węzła, który by mogły wskazywać.

Wyszukiwanie tylko elementów Bug w IE

Domyślnie ww. pola wskazują na dowolne węzły, łącznie z tekstem i komentarzami w dokumencie. Elementy od innych węzłów można odróżnić za pomocą pola nodeType.

  if (element.nextSibling && element.nextSibling.nodeType == 1)
    alert('sąsiedni węzeł jest elementem')

Kilka najczęściej spotykanych typów węzłów:

StałaWartośćCo oznacza
ELEMENT_NODE1Element
TEXT_NODE3Tekst
ENTITY_NODE6Encja
COMMENT_NODE8Komentarz (przeglądarka ma prawo ignorować komentarze)

Atrybuty

Atrybuty odczytuje się za pomocą nazwa, a ustawia za pomocą nazwa = wartość. Aby sprawdzić, czy dany atrybut istnieje, należy sprawdzić czy istnieje właśćiwość która jest nazwą atrybutu. Aby odczytać atrybut class należy użyć właśćiwośći className. Aby odczytać atrybut style należy użyć obiektu style: style.backgroundColor, style.backgroundImage. Aby odczytać <label for="..."> należy użyć htmlFor. Aby odczytać atrybut maxlength należy użyć maxLength. Aby ustawić zdarzenie należy użyć zdarzeń: zdarzeń.

 <a href="http://kurs.browsehappy.pl/" rel="archive" id="kurs">Kurs BrowseHappy</a>

 anchor = document.getElementById('kurs');

 var anchorRel = anchor.rel;
 alert(anchorRel); //zwróci wartość atrybutu rel

 if (anchor.className) 
 { 
   var anchorClassName = anchor.className;
   alert(anchorClassName); //jeżeli istenieje atrybut class, to zwróci jego wartość
 }
 anchor.rel = "kurs"; //nadpisze rel
 anchor.lang = "pl"; //stworzy nowy atrybut i przypisze mu wartość

Do usuwania atrybutów należy używać metody removeAttribute(nazwa).

Zwróć uwagę, że nie występują myślniki w nazwach właśćiwośći CSS. Zamiast tego kolejne wyrazy pisane są z wielkich liter, na przykład: backgroundColor.

Usuwanie elementów

Jeśli potrzebujesz usunąć element tylko na moment, możesz go ukryć

Każdy element posiada metodę removeChild pozwalającą usunąć jeden z zawartych w nim węzłów .

  element.parentNode.removeChild(element)
  element sam się usunie

Element usunięty z dokumentu nie jest całkowicie niszczony i może zostać ponownie dołączony do dokumentu.

Tworzenie, dodawanie i przenoszenie elementów

Elementy formularza mają czasem swoje własne, prostsze metody.

Elementy tworzy się przez document.createElement(nazwa). Stworzony element nie jest połączony z dokumentem. Trzeba go dodać za pomocą appendChild lub insertBefore.

  var p = document.createElement('p');
  document.body.appendChild(p);

  var h1 = document.createElement('h1');
  document.body.insertBefore(h1,document.body.firstChild);

appendChild() element podany jako argument dołącza jako dziecko na koniec elementu, z którego została wywołana.

insertBefore przyjmuje dwa argumenty — element do wstawienia oraz element, przed którym ma wstawić nowy. Jeśli jako drugi argument poda się null, to zadziała tak samo jak appendChild.

Wykonanie appendChild lub insertBefore na elementach, które są już w dokumencie, przeniesie je w nowe miejsce.

Wstawianie za elementem

DOM W3C nie ma metody insertAfter, która by to robiła, napiszemy ją sami:

 Node.prototype.insertAfter = function(newNode) {
 this.parentNode.insertBefore(newNode,this.nextSibling ? this.nextSibling : null)
 }

Tekst tworzy się za pomocą document.createTextNode("tekst") i podobnie jak elementy trzeba go wstawić do dokumentu, żeby stał się widoczny.

Tworzenie większych fragmentów dokumentu za pomocą metod DOM wymaga napisania sporo kodu, dlatego warto napisać sobie funkcje które od razu tworzą i dodają węzły albo mieć od razu stworzone odpowiednie elementy w kodzie XHTML i tylko je ukrywać i pokazywać za pomocą DHTML.


Zmodyfikowano: 03.09.2015, 04:53
submit