Artykuł

mar 04 2009
0

Document Object Model - odczytywanie elementów

W ostatnim czasie olbrzymią popularność święcą strony oparte na Ajaxie. Dynamiczne przetwarzanie, treść witryny dostępna bez przeładowywania i inne czynniki wynikające ze stosowania tych niezwykle udanych technologii przyczyniły się na wzrost popularność stron, w których użyto tych właśnie rozwiązań. Warto wiedzieć, że Ajax nie jest właściwie niczym nowym. Jest to połączenie kilku istniejących na rynku technologii. Jedną z nich i najważniejszą zarazem jest JavaScript, który udostępnia nam obiektowy model dokumentów (DOM).

Wprowadzenie do DOM

Zapewne wielu z Was zadaje sobie pytanie czym tak naprawdę jest ten DOM. Być może część z was kojarzy go przy okazji przetwarzania plików XML. Już spieszę z odpowiedzią. DOM jest sposobem odczytu dokumentu, w którym cała struktura przetwarzanego pliku zapisywana jest w obiekcie (pamięci). Dzięki temu, możemy w szybki sposób uzyskać dostęp do dowolnego elementu dokumentu. Każdy element możemy odczytać, przetworzyć, usunąć, a nawet rozszerzyć o kolejne elementy podrzędne.

Wczytany do pamięci dokument staję się obiektem. Stąd nazwa document object model (z ang. obiektowy model dokumentów). Po utworzeniu obiektu możemy się odwoływać do dowolnej gałęzi (node) dokumentu. Wyróżniamy następujące typy gałęzi:

  1. Document - reprezentuje cały dokument. Element nadrzędny w drzewie DOM.
  2. DocumentFragment - reprezentuje fragment całego dokumentu.
  3. DocumentInterface - dostarcza interfejs dla elementów zdefiniowanych w dokumencie.
  4. ProcessingInstruction - opisuje instrukcje przetwarzania.
  5. EntityReference - reprezentuje referencje dla jednostki.
  6. Element - reprezentuje pojedyńczy element.
  7. Attr - reprezentuje atrybut.
  8. Text - reprezentuje element tekstowy.
  9. CDATASection - reprezentuje sekcje CDATA. Tekst umieszczony w takiej w sekcji nie będzie parsowany.
  10. Comment - reprezentuje komentarz.
  11. Entity - reprezentuje jednostkę.
  12. Notation - reprezentuje notację zdefiniowaną w schemie.

Spośród elementów wymienionych powyżej, tak naprawdę używa się głównie czterech: Document, Element, Attr i Text, gdyż pozwalają one na wykonywanie większości podstawowych operacji związanych z edycją dokumentu przy pomocy DOM.

Podstawowe zastosowania DOM

Jak już wspomniałem DOM używany jest szeroko w Ajaxie. Pozwala na odwoływanie się do istniejących elementów, a następnie na ich modyfikację. DOM pozwala również na tworzenie nowych elementów. Ba, przy pomocy DOM, można również wygenerować cały dokument typu XML. Dzięki temu po przetworzeniu Ajaxowego zapytania, możemy zmiany wprowadzić bezpośrednio na elemencie.

Innym ważnym zastosowaniem DOM jest właśnie XML. Dom pozwala na szybkie i łatwe przetwarzanie dokumentów XML, które zawierają powtarzalne dane. Jednakże, jest on niezalecany w wypadku gdy mamy do czynienia z plikami XML o dużych rozmiarach, ponieważ w takiej sytuacji, cały taki duży dokument ładowany jest do pamięci. Mogłoby to doprowadzić do szybkiego przeciążenia naszego komputera. W taki wypadku lepiej zastosować parser nazywany SAX.

Logiczna struktura dokumentu

Ponieważ możemy się odwoływać do konkretnych elementów, warto tworzyć nasze dokumenty w uporządkowany sposób. Jeśli chcemy odwołać się do jakiegoś elementu w szybki i prosty sposób warto nadać mu unikatowy ID. DOM może również odwoływać się do wszystkich elementów z określonego znacznika. Np. możemy dodać atrybut title, wszystkim znacznikom img. Dlatego warto poświęcić trochę czasu na budowę czytelnego dla nas jak i dla parsera dokumentu.

Jeśli tworzymy strony w sposób dynamiczny, np. pobieramy komentarze z bazy danych, warto użyć identyfikatora, który znajduję się w bazie do reprezentacji określonego komentarza. Przykładowo jeśli komentarze wyświetlamy w tabeli, a jeden wiersz takiej tabeli stanowi jeden komentarz, to każdemu wierszowi możemy przypisać jego unikalne ID. Pozwali to na szybki dostęp do konkretnego elementu i ewentualną jego korektę. W następnym akapicie przyjrzymy się już konkretnym metodom pozwalającym na odczyt elementów w naszym własnym drzewie DOM.

Odnajdywanie elementów w DOM

Czas przejść do sedna artykułu, czyli sposobów odnajdywania elementów w drzewie DOM. W kolejnych akapitach przedstawię kluczowe polecenia związane z tą tematyką. Należy pamiętać że wszelkie metody wykonywać będziemy na obiekcie document, lub innym obiekcie zawierającym odwołanie do konkretnej gałęzi (node), który sami utworzymy.

getElementById

Funkcja getElementById pozwala na odnalezienie elementu o wskazanym unikatowym ID (zgodnie z założeniami (X)HTML każde ID powinno być unikatowe na danej stronie). Przed dalszym użycie pobranego elementu, warto sprawdzić czy rzeczywiście taki element istnieje (czy nie jest pusty).

var oParagraphNode = document.getElementById('paragraph');
if(null != oParagraphNode)
{
	// akcje jeśli sukces
}

getElementsByTagName

Funkcja getElementBysTagName, zwraca tablicę elementów o określonej nazwie. Wykonując polecenie:

var oParagraphs = document.getElementsByTagName('p');

Uzyskamy dostęp do wszystkich akapitów w obiekcie document. Elementy przechowywane są w klasycznej tablicy indeksowanej numerycznie (począwszy od zera). Dlatego też do konkretnego elementu możemy dostać się po jego indeksie. Np.

var oParagraphs = document.getElementsByTagName('p');
for(var i=0; i<oParagraphs.length; ++i)
{
	oParagraphs[i];
	// zestaw instrukcji
}

Powyższy kod umożliwi wykonywanie operacji na każdym znaczniku p znajdującym się w obiekcje document.

Jeśli chcemy pobrać wszystkie tagi znajdujące się w obrębie danego obiektu, to w miejsce nazwy tagu wstawiamy *:

var oNodes = document.getElementsByTagName('*');

Poruszanie się po drzewie DOM

Kiedy odnajdziemy już interesujący nas element możemy spróbować się poruszać po drzewie DOM. Aby tego dokonać wystarczy wykorzystać polecenia omówione w niniejszym akapicie. Każde polecenie zobrazowane jest odpowiednim screenem. Na screenie kolorem niebieskim oznaczony jest bieżący element, natomiast kolorem czarnym oznaczone są elementy do których uzyskujemy dostęp dzięki danemu poleceniu. Elementy bez tła, oznaczone przerywaną ramką, to elementy pomocnicze.

parentNode

Polecenie paretNode umożliwia wskoczenie do elementu znajdującego się powyżej danego.

var oDiv = oH1.parentNode;

childNodes

Jeśli chcemy uzyskać wszystkie elementy, które znajdują się w we wskazanym węźle możemy użyć polecenia childNodes. Warto sprawdzić czy wskazany węzeł w ogóle posiada jakieś inne węzły:

if(oDiv.hasChildNodes)
{
	oDiv.childNodes[i];
}

firstChild

firstChild pozwala nam pobrać pierwszy podrzędny element w elemencie w którym się obecnie znajdujemy.

var oH1 = oDiv.firstChild;

lastChild

lastChild pozwala nam pobrać ostatni podrzędny element w elemencie w którym się obecnie znajdujemy.

var oParagraph = oDiv.lastChild;

previousSibling

previousSibling pozwala nam pobrać poprzedni element w stosunku do naszego elementu na tym samym poziomie.

var oH1 = oH2.previousSibling;

nextSibling

nextSibling pozwala nam pobrać następny element w stosunku do naszego elementu na tym samym poziomie.

var oParagraph = oH2.nextSibling;

Podsumowanie

Dzisiejszy artykuł miał na celu przyswoić Wam, moi drodzy czytelnicy sposoby odnajdowania elementów przy pomocy DOM. W kolejnym artykule nauczymy się technik pozwalających na tworzenie nowych węzłów.

Data ostatniej modyfikacji: 05.06.2011, 17:20.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus