JavaScript DOM. Krok dalej – zgłębiamy DOM i BOM.

Zgłębiamy temat

Poziom średnio-zaawansowany

Pora zrobić krok naprzód. Zgłębiamy DOM oraz BOM (Browser Object Model, nie mylimy z Byte Order Mark).

JavaScript DOM

Omówiliśmy już podstawowe zagadnienia JS, a teraz kolej na DOM oraz BOM.

W zagadnienia DOM będziemy się zagłębiać jeszcze nie raz, jest to temat obszerny, ale zdecydowanie jeden z ciekawszych w JavaScript. Co więcej dzięki operacjom na DOM mamy bardzo duże możliwości z poziomu naszego kodu.

DOM (Document Object Model, obiektowy model dokumentu) – jest to sposób przedstawienia dokumentu (strony na której operujemy) tak, aby JavaScript „widział” go jako obiekt, na którym może operować. DOM to zestaw metod i pól, które umożliwiają dodawanie, usuwanie, odnajdywanie i zmienianie elementów.

Obiekt document – kolekcje:

anchors[]forms[]
images[]links[]

Obiekt document – właściwości:

cookiedocumentMode
domainlastModified
readyStatereferrer
titleURL

Obiekt document – metody:

close()getElementById()
getElementsByName()getElementsByTagName()
open()write()
writeln()

BOM (Browser Object Model) – to znacznie rzadziej spotykane pojęcie niż DOM. W tym rozumieniu dysponujemy obiektami związanymi z oknem przeglądarki. Czyli DOM odnosi się do dokumentu w oknie przeglądarki, a BOM do samego okna przeglądarki. Zatem jeśli BOM, to obiekt window.

Obiekt window – właściwości:

closedouterWidth
defaultStatuspageXOffset
documentpageYOffset
framesparent
historyscreen
innerHeightscreenLeft
innerWidthscreenTop
lengthscreenX
locationscreenY
nameself
navigatorstatus
openertop
outerHeight

Obiekt window – metody:

alert()open()
blur()print()
clearInterval()prompt()
clearTimeout()resizeBy()
close()resizeTo()
confirm()scroll()
createPopup()scrollBy()
focus()scrollTo()
moveBy()setInterval()
moveTo()setTimeout()

DOM – metody

Poniżej opis głównych metod, służących do prac z DOM:

getElementById(‚foo’) – uzyskuje dostęp do elementu w dokumencie, którego atrybut id = podanemu argumentowi

getElementsByName(‚foo’) – uzyskuje dostęp do elementów w dokumencie dla podanego atrybutu name

getElementsByTagName(‚foo’) – uzyskuje dostęp do elementów w dokumencie, których nazwy znaczników odpowiadają podanemu argumentowi

getElementsByClassName(‚foo’) – elementy według podanej klasy CSS

write() – wyświetla tekst

open() – otwiera strumień danych w oknie przeglądarki

close() – zamyka strumień danych


Przykład – proste operacje DOM:

<button id="guzik" onclick="wylacz()" class="foo">Test</button>
function wylacz() {
    document.getElementById("guzik").disabled = true;
}

Przyciskowi, który ma ID ‚guzik’ zostanie ustawiony na true parametr disabled.

Odwoływanie się do właściwości:

<p id="akapit">Tekst...</p>
var akapit = document.getElementById("akapit");

// pobierz wartość style: display
var widok = akapit.style.display;

// lub też w taki sposób 
var widok = akapit.style['display'];

alert(widok);

Atrybuty

Elementy posiadają atrybuty, i możemy operować na nich z poziomu JavaScript.

Atrybuty odczytuje się za pomocą getAttribute(nazwa), natomiast ustawia się je poprzez setAttribute(nazwa, wartość).

Aby sprawdzić czy dany atrybut istnieje należy użyć metody hasAttribute(nazwa).

Przykład – atrybuty:

<a href="http://google.pl/" rel="google" id="link1">Google</a>
anchor = document.getElementById('link1');
var anchorRel = anchor.getAttribute('rel');

// zwróci wartość atrybutu rel
alert(anchorRel);

Przykład – sprawdzanie atrybutów:

if (anchor.hasAttribute('class')) {
    var anchorClassName = anchor.getAttribute('class');
    // jeżeli istnieje atrybut class, to zwróci jego wartość
    alert(anchorClassName);
}

// nadpisze wartość rel
anchor.setAttribute("rel", "nowa wartość");

// stworzy nowy atrybut i przypisze mu wartość
anchor.setAttribute("lang", "en");

Mimo, że getAttribute zwraca null jeżeli atrybut nie istnieje, do usuwania atrybutów należy używać metody removeAttribute(nazwa), a nie setAttribute(nazwa, null).

Nieliczne atrybuty lepiej ustawiać za pośrednictwem specjalnych pól, które udostępniają przeglądarki. W szczególności style i class oraz value. W pozostałych przypadkach, nawet jeśli atrybuty są dostępne na różne sposoby, to należy używać ich za pomocą getAttribute() i setAttribute().

Przykład – ustawianie atrybutu style:

// ukryje element akapit
akapit.setAttribute("style", "display: none");

Przykład – usuwanie atrybutu:

// usunie wygląd akapitu ustawiony w CSS
akapit.removeAttribute("style");

Następny przykład demonstruje jeszcze ciekawszą możliwość – rozszerzenie zawartości strony. Będziemy się z tym spotykać nie raz przy programowaniu z użyciem AJAX.

Przykład – dynamiczne dodawanie zawartości strony z użyciem DOM:

// stwórz nowy element TextNode
var new_elem = document.createElement("p");
var elem_text = document.createTextNode("Nowy akapit");
new_par.appendChild(elem_text);
document.body.appendChild(new_elem);

Metoda appendChild dodaje element do elementu nadrzędnego (rodzica). Zamiast appendChild można też wstawić element przed innym elementem pisząc:

var old_elem = document.getElementById("akapit");

// wstaw przed elementem
insertBefore(new_elem, old_elem);

Usunięcie elementu:

// pierwszy akapit w kolekcji
var op = document.body.getElementsByTagName("p")[0];

document.body.removeChild(op);

Zamiana:

var new_elem = document.createElement("p");
var elem_text = document.createTextNode("Dynamiczny tekst...");
new_elem.appendChild(elem_text);

var old_elem = document.body.getElementsByTagName("p")[0];
old_elem.parentNode.replaceChild(new_elem, old_elem);

Przechodzenie po węzłach

W skrócie: mówiąc węzeł w kontekście DOM chodzi o pojedynczy element dokumentu. Może on posiadać element nadrzędny, i sam być elementem nadrzędnym dla innych elementów. Ideę prezentuje poniższy obrazek (źródło: wikipedia):

Główne właściwości JavaScript DOM dla węzłów

firstChild – pierwszy węzeł zawarty w tym elemencie („pierwsze dziecko”)

lastChild – ostatni węzeł w tym elemencie („ostatnie dziecko”)

previousSibling – sąsiedni węzeł przed tym elementem („rodzeństwo przed”)

nextSibling – sąsiedni węzeł za tym elementem („rodzeństwo za”)

parentNode – element w którym zawarty jest bieżący element („rodzic”)

childNodes – kolekcja wszystkich węzłów zawartych w tym elemencie (lista „wszystkie dzieci”)

A ponadto:

attributes – lista atrybutów elementu

nodeName – nazwa elementu (bieżącego node)

nodeValue – wartość (tylko dla elementów tekstowych)

nodeType – pokazuje jakiego typu jest dany element node

ownerDocument – dokument zawierający dany element

Przykład – przechodzenie po węzłach:

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

Przykład – usunięcie elementu:

// element "sam się usunie"
element.parentNode.removeChild(element);

Pobranie elementu nadrzędnego:

// przykładowy wynik tr dla elementu td
var a = document.getElementById('foo').parentNode.nodeName);

Zdarzenia (events)

Powiem teraz kilka słów o zdarzeniach (events) oraz funkcjach wykrywających i obsługujących zdarzenia (event listeners).

Na elementach może zajść szereg zdarzeń, takich jak najechanie czy kliknięcie myszą (events). Możemy zaprogramować kod do detekcji i obsługi tych zdarzeń gdy zajdą (event listeners).

Przykład – dodanie event listener’a do przycisku:

button = document.getElementById("guzik");

// w prawdziwych przeglądarkach (FF, Chrome, Safari, ...)
button.addEventListener("click", eventHandler, false);

// w IE natomiast:
button.attachEvent("onclick", eventHandler);

Trzeci parametr w addEventListener określa czy zdarzenia mają spływać w górę (true) – domyślnie w IE, w drzewie DOM, czy w dół (false).

W IE możemy to zmienić poprzez kod:

window.event.cancelBubble = false;

Usuwania dokonuje się poprzez wywołanie:

// IE
detachEvent();

// inne przeglądarki
removeEventListener();

Akcentem zdarzeń w JavaScript, kończymy także omawianie podstaw DOM i BOM. Z wszystkimi tymi zagadnieniami będziemy się spotykać w przyszłych artykułach i oczywiście podczas wielu programistycznych zadań.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.