JavaScript - wykład 3 Document Object Model (Obiektowy Model

Transkrypt

DOM W3C
http://kurs.browsehappy.pl/Definicja/DOM
JavaScript - wykład 3
Document Object Model
(Obiektowy Model Dokumentu)
Obiekty stron WWW
Beata Pańczyk
• słuŜy do przedstawienia dokumentów HTML i
XML (XHTML)
• CSS i Javascript uŜywają go 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.
1
2
Metody DOM
DOM W3C
Węzeł
3
Metody DOM
Selektor CSS
JavaScript DOM
Korzeń (Root)
:root, html
element.ownerDocument.documentElement
Rodzic (Parent)
brak
element.parentNode
Przodek (Ancestor)
brak
element.parentNode.parentNode...
Poprzedni sąsiad
(Previous sibling)
brak
element.previousSibling
Następny sąsiad
(Next sibling)
element + sąsiad
element.nextSibling
Pierwsze dziecko
(First child)
element >
element.firstChild
dziecko:first-child
Ostatnie dziecko
(Last child)
element >
dziecko:last-child
element.lastChild
Wszystkie dzieci
(Children)
element > *
element.childNodes
Potomkowie
(Descendants)
element *
element.getElementsByTagName('*')4
Wcześniejsze 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
• 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
5
6
1
DOM dla JavaScript
Podstawowe obiekty
• 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) - 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 7
formularza.
• 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ę HTML/XHTML
• document.documentElement główny element dokumentu (korzeń), czyli
<html>
• document.body - obiekt reprezentujący
<body> dokumentu.
8
Skakanie po węzłach (elementach)
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 (name)
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, np.:
var tab = elid.getElementsByTagName('nazwa')
for(i=0;i<tab.length;i++) tab[i]
tab - kolekcja (tablica) wszystkich elementów o nazwie nazwa
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
KaŜdy węzeł (czyli element, fragment tekstu, komentarz) posiada
pola wskazujące na jego sąsiednie węzły
Nazwa pola
Element
First child
Pierwszy węzeł zawarty w tym elemencie
Last child
Ostatni węzeł zawarty w tym elemencie
Previous sibling Sąsiedni węzeł przed tym elementem
Next sibling
Sąsiedni węzeł za tym elementem
ParentNode
Element, w którym zawarty jest ten element
ChildNodes
Kolekcja wszystkich węzłów zawartych w tym
elemencie
9
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')
Stała
Wartość
Znaczenie
ELEMENT_NODE
1
Element
TEXT_NODE
3
Tekst
ENTITY_NODE
6
Encja
COMMENT_NODE
8
Komentarz
11
10
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.:
<a href="http://kurs.browsehappy.pl/" rel="archive" id="kurs">
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ść
12
2
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
• document.createTextNode("tekst") - tworzy
węzeł tekstowy; podobnie jak elementy, Ŝeby stał się
widoczny, trzeba go wstawić do dokumentu
13
Przykład 1 – JavaScript i DOM
<head>
<meta http-equiv="Content-type"
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="utworz_liste1()">
<p>Lista kolorów:</p>
<div id="lista_kol"></div>
</body>
15
Plik js1_dom.js
function utworz_liste2()
{// 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);
17
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.fi
rstChild)
• Komentarz:
– element <p> podany jako argument metody appendChild(p)
dołączany jest jako dziecko na koniec elementu <body>, z
którego metoda została wywołana
– metoda 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
14
miejsce
Plik js_dom.js
function utworz_liste1()
{ // 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;
}
16
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);
}
18
3
Przykład 2 – DOM, JS i CSS
Przykład 2 – csstest.js
<head>
<script type="text/javascript" src="csstest.js"></script>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table id="table">
<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();" />
19
</body> </html>
// 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
20
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; }
// 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";
}
.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; }
21
22
Przykład 3 - DOM, JS i CSS
Przykład 2 – wynik działania
23
...
<link rel="stylesheet" href="p3.css" type="text/css" />
<script type="text/javascript">

</script></head>
<body onload="start();">
<div id="wr1" ></div>
<div> <input type="radio" name="rd1" onclick="pokaz();"
checked="checked" />PokaŜ
<input type="radio" name="rd1" onclick="ukryj();" />Ukryj</div>
</body></html>
24
4
Przykład 3 – p3.css
Uproszczona struktura DOM
#wr1 {position:absolute; left:100px; top:50px; width:100px;
height:100px; background-color:yellow; visibility:visible;}
http://republika.onet.pl/13965,15324,1,05,kursy.html#15324
25
26
Obiekt window
Obiekty stron WWW
Obiekty kaŜdej strony:
• window
bieŜące okno przeglądarki
• document
bieŜący dokument HTML
• history
lista historyczna przeglądarki
• location
bieŜący adres URL
• navigator informacje o przeglądarce
27
Składowe obiektu window dla
danej przegladarki
• 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, np.:
alert("Uwaga!");
window.alert("Uwaga!");
• Skrypt wyświetli składowe window dla danej przeglądarki:
for(index in window)
{ document.write(index +" = " +
window[index] + "<br />");
}
</script>
28
Metody obiektu window
29
• alert("komunikat")
wyświetla komunikat w okienku dialogowym
z przyciskiem OK
• zmienna=window.prompt("komunikat",
"wartość_domyślna")
wyświetla okienko dialogowe prompt 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 30
5
Własności otwieranego okna
Metody obiektu window
• open("URL", "nazwa okna", cecha1,
cecha2,...) - otwiera nowe okno przeglądarki z podanymi
cechami, zakrywające poprzednie, np.
window.open("URL_dokumentu",
"nazwa_okna","cecha1,cecha2,...");
• otwarcie nowego, pustego okna
open("about:blank") lub open("")
• opener - nazwa okna wywołującego aktualne okno
• zmiana właściwości opener – utrata powiązań z oknem
wywołującym; przypisanie opener=null - zamknięcie
okien potomnych, np.
window.opener.document.bgColor="blue";
• closed - zmienna logiczna: okno otwarte (false),
zamknięte (true)
• close() - likwiduje okno, w którym metoda występuje lub
31
na rzecz którego jest wywołana np. ok1.close()
pasek narzędzi
toolbar=yes/no
lokalizator URL
location=yes/no
directories=yes/no pasek katalogów
pasek stanu
status=yes/no
pasek menu
menubar=yes/no
scrollbars=yes/no paski przewijania
width=n [pikseli] szerokość okna
height=n [pikseli] wysokość okna
resizable=yes/no czy uŜytkownik moŜe zmieniać
rozmiar okna
• copyhistory=yes/no czy okno dziedziczy historię sesji
okna nadrzędnego
• dependent=yes/no czy ma być zamykane z oknem
nadrzędnym (v.1.2)
•
•
•
•
•
•
•
•
•
32
Przykład
Tworzenie okna
Zasady określania cech okna
• Brak wyszczególnienia cech wymagających włączenia automatyczne włączenie wszystkich
• Wyszczególnienie choć jednej cechy - automatyczne
wyłączenie pozostałych
• Podanie wymiarów okna - równoznaczne
określeniu resizable=no
• Np.:
open("hello.html","noweOkno","toolbar");
open("","okno1","toolbar,menubar=yes");
<html><head>
function noweokno()
{ ok1=window.open('muszla.gif','okno',
'width=100,height=200'); }
</script>
</head>
<body>
<h1>Wspomnienie lata:</h1>
<a href="noweokno()">Morze</a>
</body></html>
33
34
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, które zawierają
wszystkie zdefiniowane w obiekcie znaczniki
danego typu; indeksy pól tablic - nadawane
według kolejności definiowania danego rodzaju
znaczników, np. - określenie liczby formularzy w
oknie: forms.length
35
Wybrane własności obiektu
document
•
•
•
•
•
•
•
•
•
•
•
•
linkcolor
alinkColor
bgcolor
fgcolor
title
styleSheets
url
anchors
links
images
frames
forms
definiuje kolor odnośnika
kolor aktywnego odnośnika
kolor tła dokument
kolor tekstu dokumentu
tytuł strony
zawiera style zdefiniowane w dokumencie
adres URL dokumentu
tablica obiektów typu anchor
tablica obiektów typu link
tablica obiektów typu image
tablica obiektów typu frame
36
tablica obiektów typu form
6
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>Dziękujemy</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
37
HTML
Dokument
HTML
images[0]
images[1]
links[0]
elements[0]
elements[1]
forms[0]
elements[2]
elements[3]
links[1]
39
Przykład – właściwości obiektu
document
ZaleŜności hierarchiczne tablic
• Hierarchia obiektów strony WWW
document
links[0]
images[0]
forms[0] links[1]
elements[0] elements[1] elements[2] elements[3]
• Odwołanie do wartości pola formularza
document.forms[0].elements[1].value
38
Przykład – właściwości obiektu
document
document.write("Kolor tła dokumentu: " + document.bgColor);
document.write("<br />Kolor tekstu dokumentu: " + document.fgColor);
document.write("<br />Tytuł dokumentu: " + document.title);
document.write("<br />Data ostatniej modyfikacji dokumentu: " +
document.lastModified);
document.write("<br />Liczba obrazów w dokumencie: " +
document.images.length);
document.write("<br />Liczba odnośników w dokumencie: " +
document.links.length);
document.write("<br />Liczba formularzy w dokumencie: " +
document.forms.length);
</script>
40
Obiekt history
• przechowuje historię odwiedzin stron dokonanych
przez uŜytkownika podczas danej sesji
przeglądarki
• nie jest częścią specyfikacji W3C, ale jest
obsługiwany przez praktycznie wszystkie
popularne przeglądarki
• jego właściwości i metody pozwalają na
przemieszczanie się pomiędzy juŜ odwiedzonymi
stronami
• adresy URL - przechowywane w formie
łańcuchów tekstowych
41
42
7
Właściwości obiektu history
Metody obiektu history
• back() - wczytuje poprzedni dokument
• forward() - wczytuje następny dokument
• go(param) - wczytuje dokument wskazywany
przez argument param; jeŜeli argument jest
wartością całkowitą, oznacza ona pozycję
(względem bieŜącego dokumentu) na liście
przechowywanej przez obiekt history, jeŜeli zaś
parametrem jest ciąg znaków, jest on traktowany
jako URL dokumentu znajdującego się na liście
obiektu history, np.:
window.history.go(-1); cofnięcie się o
jedną pozycję wstecz - to samo realizuje:
window.history.back();
• current - zawiera URL aktualnego
dokumentu
• length - zawiera liczbę elementów
przechowywanych przez obiekt history
• next - zawiera URL kolejnego elementu
obiektu history
• previous - zawiera URL poprzedniego
elementu obiektu history.
43
44
Obiekt location
Przykład - obiekt history
• zawiera informacje dotyczące adresu URL aktualnie
załadowanego dokumentu oraz metody pozwalające na
manipulację tym adresem
• pełna postać adresu URL
protocol://host:port/pathname#hash?search
• Własności:
hash - część adresu URL znajdująca się za znakiem #
host - część URL zawierająca nazwę hosta oraz numer portu
hostname - część URL zawierająca nazwę hosta
href - pełny adres URL
pathname - część URL ze ścieŜkę dostępu i nazwą pliku
port - część adresu URL zawierająca numer portu
protocol - część URL z nazwą protokołu (np. http, ftp)
search - część URL znajdująca się za znakiem zapytania
<html> <body>

<form ...>
<p>
<input type="button" value="wstecz" onclick="history.back();"/>
<input type="button" value="dalej" onclick="history.forward();"/>
</p></form>
</body>
</html>
45
Przykład - właściwości location
<script
type="text/javascript">
for(i in location)
{ document.write(i + " " +
location[i] + "<br/>");
}
</script>
46
Obiekt navigator
• przechowuje informacje dotyczące
przeglądarki, jej nazwy, wersji, języka,
systemu operacyjnego, na którym została
uruchomiona itp.
• nie jest częścią specyfikacji W3C, ale
większość produktów obsługuje pewien
standardowy zestaw właściwości
47
48
8
Własności obiektu navigator
•
•
•
•
•
•
•
•
appCodeName - nazwa kodowa przeglądarki.
appName - oficjalna nazwa przeglądarki
appVersion - wersja kodowa przeglądarki.
cookieEnabled - określa, czy w przeglądarce jest
włączona obsługa cookies (true/false)
language - kod języka przeglądarki
mimetypes - tablica zawierająca listę typów mime
obsługiwanych przez przeglądarkę
platform - określa platformę systemową, dla której
jest przeznaczona przeglądarka
userAgent - ciąg wysyłany przez przeglądarkę do
serwera jako nagłówek HTTP_USER_AGENT. Z
49
reguły pozwala na dokładną identyfikację przeglądarki
Przykład właściwości
navigator
<script type=
"text/javascript">
for(i in navigator)
{ document.write( i
+ " " + navigator[i]
+ "<br/>");
}
</script>
50
Przykład - informacja
o przeglądarce
ff=navigator['userAgent'];
//ff=navigator.userAgent;
document.write("<p>Korzystasz z przeglądarki: " +ff + "</p>");
</script>
51
9

JavaScript - wykład 3 Document Object Model (Obiektowy Model

Transkrypt

Podobne dokumenty

JavaScript - sosw.poznan.pl