JS_w3

JavaScript - wykład 3

Document Object Model

(Model Obiektów Dokumentu)

Beata Pańczyk

DOM W3C

http://kurs.browsehappy.pl/Definicja/DOM

• DOM W3C (nazywany czasem wg wersji: DOM1,

DOM2, DOM3)

• słuŜy głównie do przedstawienia dokumentów

HTML oraz XML (XHTML). UŜywają go języki
takie jak CSS i Javascript do operowania na
dokumentach

• Wg W3C DOM dokument to drzewiasty zbiór

węzłów. Węzeł moŜe być elementem, ciągiem
tekstu, komentarzem, itp. KaŜdy węzeł moŜe mieć
jednego rodzica, dowolną ilość braci (lub
sąsiadów) i, jeśli jest elementem, dowolną ilość
dzieci.

DOM W3C

Metody DOM

element.getElementsByTagName('*')

element *

Potomkowie
(Descendants)

element.childNodes

element > *

Wszystkie dzieci
(Children)

element.lastChild

element >
dziecko:last-child

Ostatnie dziecko
(Last child)

element.firstChild

element >
dziecko:first-child

Pierwsze dziecko
(First child)

element.nextSibling

element + sąsiad

Następny sąsiad
(Next sibling)

element.previousSibling

brak

Poprzedni sąsiad
(Previous sibling)

element.parentNode.parentNode...

brak

Przodek (Ancestor)

element.parentNode

brak

Rodzic (Parent)

element.ownerDocument.documentElement

:root, html

Korzeń (Root)

JavaScript DOM

Selektor CSS

Węzeł

Metody DOM

Selektory CSS nie dają moŜliwości
wybrania przodków, ani poprzedników aby
ułatwić przeglądarkom wyświetlanie
progresywne (element występujący później
w dokumencie nie powinien

mieć wpływu na wcześniejsze) oraz

uniemoŜliwić zrobienie kombinacji
selektorów dających błędne koło.

Inne modele dokumentu

• DOM Netscape (DOM0) - znacznie róŜniący się

od W3C DOM, był częścią pierwotnego języka
Javascript wprowadzonego przez Netscape.
Dzielił dokument na kolekcje obrazków, linków,
fomularzy, itp. Część z tych rozwiązań została
zachowana w W3C DOM dla kompatybilności
wstecz

• DOM Microsoft (DHTML) document.all był

zbiorem wszystkich elementów posortowanym wg
ich identyfikatora, kolejności w dokumencie lub
nazwy tagu. Microsoft porzucił swój DOM na
rzecz tego z W3C

DOM dla JavaScript

• DOM - sposób przedstawienia dokumentu; zestaw metod i pól,

które umoŜliwiają odnajdywanie, zmienianie, usuwanie i dodawanie
elementów

• DOM W3C (dwie części):

– podstawowy (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ą

– DOM HTML (typowy dla przeglądarek) - 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

• window

- główny, globalny obiekt w

DOM; w nim przechowywane są
wszystkie globalne zmienne i funkcje; w
nim jest takŜe obiekt document, który
reprezentuje całą stronę XHTML

• document.documentElement

- główny

element dokumentu (korzeń), czyli <html>

• document.body

- obiekt reprezentujący

<body> dokumentu.

Odnajdywanie elementów (1)

• getElementById(id) - po identyfikatorze

var elid = document.getElementById('elid')
if (!elid) alert('nie ma elementu o tym id!')

• getElementsByTagName(nazwa) - po nazwie elementu;

zwraca kolekcję wszystkich elementów, które mają
określoną nazwę; * zamiast nazwy - wszystkie elementy;
wywołanie metody na dowolnym elemencie – zwraca tylko
elementy w nim zawarte:
var bary = elid.getElementsByTagName('bar')
for(i=0;i<bary.length;i++) bary[i]
bary - kolekcja (tablica) wszystkich elementów o nazwie
bar wewnątrz elementu reprezentowanego przez obiekt elid
Kolekcje reagują na zmiany w dokumencie - jeśli element
zostanie usunięty z dokumentu, to zniknie takŜe ze
wszystkich kolekcji

Skakanie po węzłach (elementach)

KaŜdy węzeł (czyli element, fragment tekstu, komentarz) posiada

pola wskazujące na jego sąsiednie węzły

Kolekcja wszystkich węzłów zawartych w tym
elemencie

ChildNodes

Element, w którym zawarty jest ten element

ParentNode

Sąsiedni węzeł za tym elementem

Next sibling

Sąsiedni węzeł przed tym elementem

Previous sibling

Ostatni węzeł zawarty w tym elemencie

Last child

Pierwszy węzeł zawarty w tym elemencie

First child

Element

Nazwa pola

Wyszukiwanie tylko elementów

•

Domyślnie 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
nodeTyp:

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

COMMENT_NODE

ENTITY_NODE

TEXT_NODE

ELEMENT_NODE

Stała

Komentarz

Encja

Tekst

Element

Znaczenie

Wartość

Atrybuty

• getAttribute(nazwa) – odczyt, zwraca null jeŜeli atrybut nie

istnieje

• setAttribute(nazwa,wartość) – ustawianie
• removeAttribute(nazwa) – usuwanie
• hasAttribute(nazwa) - sprawdzenie czy dany atrybut istnieje
Np.:

Kurs BrowseHappy</a>

anchor = document.getElementById('kurs');
var anchorRel = anchor.getAttribute('rel');
alert(anchorRel); //zwróci warto

ść

atrybutu rel

if(anchor.hasAttribute('class'))

var anchorClassName = anchor.getAttribute('class');

alert(anchorClassName); //je

eli istnieje class, to zwróci jego

warto

ść

anchor.setAttribute("rel", "kurs"); //nadpisze rel

anchor.setAttribute("lang", "pl"); //stworzy nowy atrybut i

// przypisze mu warto

ść

Usuwanie, tworzenie i dodawanie

elementów

• removeChild - metoda pozwalającą (kaŜdemu elementowi)

usunąć jeden z węzłów w nim zawartych
element.parentNode.removeChild(element)

• element usunięty z dokumentu nie jest całkowicie niszczony i

moŜe zostać ponownie dołączony do dokumentu

• document.createElement(nazwa) – tworzy element, który nie

jest połączony z dokumentem - trzeba go dodać za pomocą

• appendChild lub insertBefore
• Tekst tworzy się za pomocą:

document.createTextNode("tekst")
podobnie jak elementy trzeba go wstawić do dokumentu, Ŝeby
stał się widoczny.

Tworzenie, dodawanie i przenoszenie

elementów - przykład

• Np.

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

• Komentarz:

– 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

Przykład 1 – JavaScript i DOM

<head>

content="application/xhtml+xml;
charset=iso-8859-2" />

<title> DOM i JavaScript </title>
<script type="text/javascript"

src="js_dom.js"> </script>

</head>
<body onload="process()">

<p>Lista kolorów:</p>
<div id="lista_kol"></div>

</body>

Przykład 1 – JavaScript i DOM

Plik js_dom.js

function process()
{ // tworzenie kodu HTML

var lista;
lista = "<ul>" + "<li>Czarny</li>"

+ "<li>Pomara

czowy</li>"+ "<li>Ró

owy</li>"

+ "</ul>";

// pobranie odwołania do elementu <div> na stronie
myDiv = document.getElementById("lista_kol");
// dodanie zawarto

ci do elementu <div>

myDiv.innerHTML = lista;

}

Przykład 1 – JavaScript i DOM

Plik js1_dom.js

function process()
{// tworzy pierwszy w

zeł tekstowy

oHello = document.createTextNode ("Lista kolorów:");
// tworzy element <ul>
oUl = document.createElement("ul")

// tworzy pierwszy element <ui> i dodaje do niego w

zeł tekst.

oLiBlack = document.createElement("li");
oBlack = document.createTextNode("Czarny");
oLiBlack.appendChild(oBlack);

// tworzy drugi element <ui> i dodaje do niego w

zeł tekstowy

oLiOrange = document.createElement("li");
oOrange = document.createTextNode("Pomara

czowy");

oLiOrange.appendChild(oOrange);

Przykład 1 – JavaScript i DOM

Plik js1_dom.js

// tworzy trzeci element <ui> i dodaje do niego w

zeł tekstowy

oLiPink = document.createElement("li");
oPink = document.createTextNode("Ró

owy");

oLiPink.appendChild(oPink);

// dodaje elementy <ui> do elementu <ul> jako jego potomstwo

oUl.appendChild(oLiBlack);
oUl.appendChild(oLiOrange);
oUl.appendChild(oLiPink);

// pobiera odwołanie do elementu <div> na stronie

myDiv = document.getElementById("lista_kol");

// dodaje zawarto

ść

do elementu <div>

myDiv.appendChild(oHello);
myDiv.appendChild(oUl);

}

Przykład 2 – DOM, JS i CSS

<tr><th id="tableHead">Technologie internetowe</th> </tr>
<tr><td id="tableFirstLine"> XHTML/CSS </td> </tr>
<tr><td id="tableSecondLine">JavaScript </td> </tr>

</table> <br />
<input type="button" value="Ustaw Styl 1"

onclick="setStyle1();" />

<input type="button" value="Ustaw Styl 2"

onclick="setStyle2();" />

</body> </html>

Przykład 2 – csstest.js

// Zmiana stylu tabeli na styl 1
function setStyle1() {

// pobranie odwołań do elementów HTML
oTable = document.getElementById("table");
oTableHead = document.getElementById("tableHead");
oTableFirstLine = document.getElementById("tableFirstLine");
oTableSecondLine = document.getElementById("tableSecondLine");
// ustawienie styli
oTable.className = "Table1";
oTableHead.className = "TableHead1";
oTableFirstLine.className = "TableContent1";
oTableSecondLine.className = "TableContent1";

}

Przykład 2 – csstest.js

// Zmiana stylu tabeli na styl 2
function setStyle2() {

// pobranie odwołań do elementów HTML
oTable = document.getElementById("table");
oTableHead = document.getElementById("tableHead");
oTableFirstLine = document.getElementById("tableFirstLine");
oTableSecondLine = document.getElementById("tableSecondLine");
// ustawienie styli
oTable.className = "Table2";
oTableHead.className = "TableHead2";
oTableFirstLine.className = "TableContent2";
oTableSecondLine.className = "TableContent2";

}

Przykład 2 – styles.css

.Table1 {

border: DarkGreen 1px solid;

background-color:LightGreen;}

.TableHead1 { font-family: Verdana, Arial; font-weight: bold;

font-size: 10pt; }

.TableContent1{ font-family: Verdana, Arial; font-size: 10pt; }

.Table2 {

border: DarkBlue 1px solid;

background-color:LightBlue;}

.TableHead2 { font-family: Verdana, Arial; font-weight: bold;

font-size: 10pt; }

.TableContent2 { font-family: Verdana, Arial; font-size: 10pt; }

Przykład 2 – wynik działania

Obiekty stron WWW

Obiekty kaŜdej strony:

• navigator

informacje o przeglądarce

• window

bieŜące okno przeglądarki

• document

bieŜący dokument HTML

• location

bieŜący adres URL

• history

lista historyczna przeglądarki

Obiekty dodatkowe:

• anchor

• link

• image

• form

• plugin

• mimeType

Schemat dziedziczenia obiektów

strony WWW

window

document

location

history

frame

navigator

layer

image

link

area

anchor

applet

embed

form

plugin

mimeType

element

Obiekt

window

• Reprezentuje widoczne okno przeglądarki
• Jest tworzony automatycznie w chwili

otwarcia okna przeglądarki

• Stoi na czele hierarchii obiektów JavaScript
• W odwołaniu do właściwości i metod okna

bieŜącego - nazwa

window

niekonieczna

• Przykład

alert("Uwaga!");

window.alert("Uwaga!");

Metody obiektu

window

• alert(

komunikat

)

wyświetla komunikat w okienku dialogowym
z przyciskiem OK

• zmienna=window.prompt(

komunikat

warto

ść

_domy

lna

)

- wyświetla okienko

dialogowe z promptem o treści komunikat i
zwracająca dane wprowadzone przez uŜytkownika

• confirm(

komunikat

)

wyświetla komunikat w okienku dialogowym
z przyciskiem OK i Cancel; metoda zwraca wartość
true, gdy uŜytkownik wybierze przycisk OK i false w
przeciwnym razie

• Status -

wyświetla komunikat na pasku stanu

Metody obiektu

window

• open("URL", "nazwa okna", cecha1,

cecha2,...)

- otwiera nowe okno przeglądarki z

podanymi cechami

• close()

- likwiduje okno, w którym metoda występuje

• setTimeout("zadanie", czas)

wykonuje

zadanie

(wyraŜenie lub funkcję) po upływie

podanego

czasu

(w milisekundach)

• setInterval

("funkcja", czas [,argumenty])

wywołuje funkcję w regularnych odstępach czasu (w
milisekundach); v. 1.2

• Zatrzymanie wykonywania metod:

clearTimeout(identyfikator)
clearInterval(identyfikator)

Przykład - ruchomy napis w pasku stanu

var napis="Witamy!!! ";

var i=0;
function przewijaj(){
n1=napis.substring(i, napis.length);
n2=napis.substring(0,i);
status=n1+n2;

if(i<napis.length) i++; else i=0;

setTimeout("przewijaj();",200);}

</script>

</head> <body onload="przewijaj();">

</body></html>

Własności obiektu

window

• self

wskazuje bieŜące okno

• parent

wskazuje okno rodzicielskie ramki

• top

wskazuje okno najwyŜszego rzędu,
"właściciela" wszystkich ramek

• name

wewnętrzny identyfikator okna
(ramki)

• frames

tablica ramek potomnych w oknie

• document

wskazuje bieŜący dokument

Tablice obiektów standardowych

• Zawierają wszystkie zdefiniowane

w obiekcie znaczniki danego typu

• Indeksy pól tablic - nadawane według

kolejności definiowania danego rodzaju
znaczników

• Przykład - określenie liczby formularzy w

oknie:

forms.length

Obiekt

document

• Tworzony automatycznie przez znacznik

<body>

• Zawiera

– wszystkie informacje na temat aktualnie

wyświetlanego dokumentu HTML

– wszystkie elementy składowe dokumentu

• Elementy składowe - w tablicach

Własności obiektu

document

• alinkColor

parametr alink znacznika
<body>

• vlinkcolor

parametr vlink znacznika
<body>

• bgcolor

parametr bgcolor znacznika
<body>

• fgcolor

parametr text znacznika
<body>

• title

tytuł strony (znacznik <title>)

• url

adres URL dokumentu

Tablice obiektu

document

• anchors

tablica obiektów typu

anchor

• links

tablica obiektów typu

link

• images

tablica obiektów typu

image

• frames

tablica obiektów typu

frame

• forms

tablica obiektów typu

form

• embeds

tablica obiektów typu

embed

• applets

tablica obiektów typu

applet

• layers

tablica obiektów typu

layer

Metody i zdarzenia dla obiektu

document

• Metody:

– document.clear()

- czyszczenie bieŜącego okna

– document.write(

tekst

)

- wyświetla tekst w

oknie np. document.write(" <h1>Dziekujemy</h1> ")

– document.writeln("tekst")

• Zdarzenia:

– onLoad - wyzwala skrypty, które powinny zostać

uruchomione bezpośrednio po zakończeniu ładowania
dokumentu HTML do przeglądarki

– onUnload - wyzwala skrypty, które powinny zostać

uruchomione bezpośrednio po wyjściu z dokumentu
HTML

•

Przykładowa strona WWW

images[0]

forms[0]

elements[0]
elements[1]
elements[2]

elements[3]

links[1]

links[0]

ZaleŜności hierarchiczne tablic

• Hierarchia obiektów strony WWW

• Odwołanie do wartości pola

nazwisko

document.forms[0].elements[1].value

• Nadawanie obiektom nazw, np.

document.formularz.nazwisko.value

document

links[0]

images[0]

forms[0]

links[1]

elements[0] elements[1] elements[2] elements[3]

Obiekt

location

• Zawiera adres URL aktualnego dokumentu

• Pełna postać adresu URL

protocol//host:port/pathname#hash?search

• Zmiana dokumentu wyświetlanego w oknie

nazwa_okna.location=nowy_adres

• Przykład - kierowanie uŜytkownika na inną stronę

<a href="brak_js.html"
onclick="window.location='jest_js.html';

return false;">zapraszamy</a>

Własności obiektu

location

• href

pełny adres URL

• protocol

protokół - np.

http:

• host

nazwa serwera

• port

port, przez który naleŜy się łączyć
z serwerem
(zwykle

location.port=''

)

• hostname

to sam, co

host:port

• pathname

cieŜka dostępu do dokumentu

• hash

zakotwiczenie w dokumencie

• search

dodatkowe parametry

Obiekt

history

• Zawiera informacje na temat adresów

dokumentów HTML, które były ostatnio
ładowane przez przeglądarkę (odpowiada
liście historycznej przeglądarki)

• Adresy URL - przechowywane w formie

łańcuchów tekstowych

Metody obiektu

history

• back

()

przejście o jedno miejsce na
liście wstecz

• forward

()

przejście o jedno miejsce na
liście w przód

• go

(liczba)

przejście w miejsce

określone liczbą, np.

go(-1)

back()

• go

("łańcuch")wyszukuje najbliŜszy adres

zawierający podany łańcuch

Przykład - obiekt

history

<html> <body>
<!-- ewentualna zawarto

ść

strony -->

<form>
<input type="button" value="wstecz"

onclick="history.back();"/>

<input type="button" value="dalej"

onclick="history.forward();"/><br/>

</form>
</body>
</html>

Własności obiektu

navigator

• SłuŜy do ustalenia wersji przeglądarki uŜywanej

przez uŜytkownika (funkcja informacyjna -dane do
odczytu)

• appCodeName

- nazwa kodowa przeglądarki

• appName -

nazwa przeglądarki

• appVersion -

numer wersji przeglądarki

• userAgent -

pełna informacja o przeglądarce

• language -

wersja językowa przeglądarki

• platform -

system operacyjny przeglądarki

Własności obiektu

mimeType

• type

nazwa typu MIME

• description

opis typu
(np. "GIF Image")

• suffixes

moŜliwe rozszerzenia pliku
(np. GIF)

• enabledPlugin

odsyłacz do obiektu

plugin

skonfigurowanego

dla danego typu MIME

Obiekt

plugin

• Obiekt typu

plugin

- tablica zawierąjącą

podstawowe dane typu MIME danego modułu

• Właściwości obiektu

plugin

– name

nazwa plug-ina

– description

opis

– filename

nazwa pliku z programem

– length

liczba typów MIME
obsługiwanych przez plug-in

Przykład - kontrola

przeglądarki i plug-ina

<head>

document.write("<h3>"+navigator.appName+"</h3>");

ile=navigator.plugins.length; //ilo

ść

plug-in

if (ile>0){for (i=0; i<ile; i++)

document.write("Plug-in:"+navigator.plugins[0].name+"<br/>");}

else document.write("Brak plug-in");

</script>

</head>

</html>