JavaScript - wykład 3 Document Object Model (Obiektowy Model Dokumentu) Obiekty stron WWW Beata Pańczyk 1 DOM W3C http://kurs.browsehappy.pl/definicja/dom 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. 2 DOM W3C 3 Węzeł Korzeń (Root) Rodzic (Parent) Przodek (Ancestor) Poprzedni sąsiad (Previous sibling) Następny sąsiad (Next sibling) Pierwsze dziecko (First child) Ostatnie dziecko (Last child) Wszystkie dzieci (Children) Potomkowie (Descendants) Metody DOM Selektor CSS :root, html brak brak brak element + sąsiad element > dziecko:first-child element > dziecko:last-child element > * element * element.ownerdocument.element element.parentnode element.parentnode.parentnode... element.previoussibling element.nextsibling element.firstchild element.lastchild element.childnodes JavaScript DOM element.getelementsbytagname('*') 4 Metody DOM Wcześniejsze modele dokumentu 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 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).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 6 1
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) - 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. Podstawowe obiekty window - główny, globalny obiekt w DOM; w nim przechowywane są wszystkie globalne zmienne i funkcje; w nim jest takŝe obiekt, który reprezentuje całą stronę HTML/XHTML.Element - główny element dokumentu (korzeń), czyli <html>.body - obiekt reprezentujący <body> dokumentu. 8 Odnajdywanie elementów (1) getelementbyid(id) - po identyfikatorze var elid =.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 9 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 Nazwa pola First child Last child Previous sibling Next sibling ParentNode ChildNodes Element Pierwszy węzeł zawarty w tym elemencie Ostatni węzeł zawarty w tym elemencie Sąsiedni węzeł przed tym elementem Sąsiedni węzeł za tym elementem Element, w którym zawarty jest ten element Kolekcja wszystkich węzłów zawartych w tym elemencie 10 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 ELEMENT_NODE TEXT_NODE ENTITY_NODE COMMENT_NODE Wartość 1 3 6 8 Element Tekst Encja Komentarz Znaczenie 11 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 =.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"); anchor.setattribute("lang", "pl"); //nadpisze rel //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.createelement(nazwa) tworzy element, który nie jest połączony z dokumentem - trzeba go dodać za pomocą appendchild lub insertbefore.createtextnode("tekst") - tworzy węzeł tekstowy; podobnie jak elementy, Ŝeby stał się widoczny, trzeba go wstawić do dokumentu 13 Tworzenie, dodawanie i przenoszenie elementów - przykład Np. var p =.createelement('p');.body.appendchild(p); var h1 =.createelement('h1');.body.insertbefore(p,.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 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"> </head> <body onload="utworz_liste1()"> <p>lista kolorów:</p> <div id="lista_kol"></div> </body> 15 Przykład 1 JavaScript i DOM 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 =.getelementbyid("lista_kol"); // dodanie zawartości do elementu <div> mydiv.innerhtml = lista; 16 Przykład 1 JavaScript i DOM Plik js1_dom.js function utworz_liste2() {// tworzy pierwszy węzeł tekstowy ohello =.createtextnode ("Lista kolorów:"); // tworzy element <ul> oul =.createelement("ul") // tworzy pierwszy element <ui> i dodaje do niego węzeł tekst. oliblack =.createelement("li"); oblack =.createtextnode("czarny"); oliblack.appendchild(oblack); // tworzy drugi element <ui> i dodaje do niego węzeł tekstowy oliorange =.createelement("li"); oorange =.createtextnode("pomarańczowy"); oliorange.appendchild(oorange); 17 Przykład 1 JavaScript i DOM Plik js1_dom.js // tworzy trzeci element <ui> i dodaje do niego węzeł tekstowy olipink =.createelement("li"); opink =.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 =.getelementbyid("lista_kol"); // dodaje zawartość do elementu <div> mydiv.appendchild(ohello); mydiv.appendchild(oul); 18 3
Przykład 2 DOM, JS i CSS <head> <script type="text/javascript" src="csstest.js"> <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();" /> Przykład 2 csstest.js // Zmiana stylu tabeli na styl 1 function setstyle1() { // pobranie odwołań do elementów HTML otable =.getelementbyid("table"); otablehead =.getelementbyid("tablehead"); otablefirstline =.getelementbyid("tablefirstline"); otablesecondline =.getelementbyid("tablesecondline"); // ustawienie styli otable.classname = "Table1"; otablehead.classname = "TableHead1"; otablefirstline.classname = "TableContent1"; otablesecondline.classname = "TableContent1"; </body> </html> 19 20 Przykład 2 csstest.js // Zmiana stylu tabeli na styl 2 function setstyle2() { // pobranie odwołań do elementów HTML otable =.getelementbyid("table"); otablehead =.getelementbyid("tablehead"); otablefirstline =.getelementbyid("tablefirstline"); otablesecondline =.getelementbyid("tablesecondline"); // ustawienie styli otable.classname = "Table2"; otablehead.classname = "TableHead2"; otablefirstline.classname = "TableContent2"; otablesecondline.classname = "TableContent2"; 21 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; 22 Przykład 2 wynik działania 23 Przykład 3 - DOM, JS i CSS... <link rel="stylesheet" href="p3.css" type="text/css" /> <!-- Ukrycie JavaScriptu function pokaz() {.getelementbyid("wr1").style.visibility = "visible"; function ukryj() {.getelementbyid("wr1").style.visibility = "hidden"; //Koniec kodu JavaScript --> </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 #wr1 {position:absolute; left:100px; top:50px; width:100px; height:100px; background-color:yellow; visibility:visible; Uproszczona struktura DOM http://republika.onet.pl/13965,15324,1,05,kursy.html#15324 25 26 Obiekty stron WWW Obiekty kaŝdej strony: window bieŝące okno przeglądarki bieŝący dokument HTML history lista historyczna przeglądarki location bieŝący adres URL navigator informacje o przeglądarce 27 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, np.: alert("uwaga!"); window.alert("uwaga!"); Skrypt wyświetli składowe window dla danej przeglądarki: for(index in window) {.write(index +" = " + window[index] + "<br />"); 28 Składowe obiektu window dla danej przegladarki 29 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 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
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..bgcolor="blue"; closed - zmienna logiczna: okno otwarte (false), zamknięte (true) close() - likwiduje okno, w którym metoda występuje lub Własności otwieranego okna toolbar=yes/no pasek narzędzi location=yes/no lokalizator URL directories=yes/nopasek katalogów status=yes/no pasek stanu menubar=yes/no pasek menu 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/noczy okno dziedziczy historię sesji okna nadrzędnego dependent=yes/no czy ma być zamykane z oknem nadrzędnym (v.1.2) na rzecz którego jest wywołana np. ok1.close() 31 32 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"); Przykład Tworzenie okna <html><head> function noweokno() { ok1=window.open('muszla.gif','okno', 'width=100,height=200'); </head> <body> <h1>wspomnienie lata:</h1> <a href="noweokno()">morze</a> </body></html> 33 34 Obiekt 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 linkcolor definiuje kolor odnośnika alinkcolor kolor aktywnego odnośnika bgcolor kolor tła dokument fgcolor kolor tekstu dokumentu title tytuł strony stylesheets zawiera style zdefiniowane w dokumencie url adres URL dokumentu 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 36 6
Metody i zdarzenia dla obiektu Metody:.clear() - czyszczenie bieŝącego okna.write("tekst") - wyświetla tekst w oknie np..write("<h1>dziękujemy</h1>").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 ZaleŜności hierarchiczne tablic Hierarchia obiektów strony WWW links[0] images[0] forms[0] links[1] elements[0] elements[1] elements[2] elements[3] Odwołanie do wartości pola formularza.forms[0].elements[1].value 38 Dokument HTML images[0] images[1] links[0] elements[0] elements[1] elements[2] elements[3] links[1] forms[0] 39 Przykład właściwości obiektu.write("kolor tła dokumentu: " +.bgcolor);.write("<br />Kolor tekstu dokumentu: " +.fgcolor);.write("<br />Tytuł dokumentu: " +.title);.write("<br />Data ostatniej modyfikacji dokumentu: " +.lastmodified);.write("<br />Liczba obrazów w dokumencie: " +.images.length);.write("<br />Liczba odnośników w dokumencie: " +.links.length);.write("<br />Liczba formularzy w dokumencie: " +.forms.length); 40 Przykład właściwości obiektu 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 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 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(); 44 Przykład - obiekt history <html> <body> <!-- ewentualna zawartość strony --> <form...> <p> <input type="button" value="wstecz" onclick="history.back();"/> <input type="button" value="dalej" onclick="history.forward();"/> </p></form> </body> </html> 45 Obiekt location 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 46 Przykład - właściwości location <script type="text/javascript"> for(i in location) {.write(i + " " + location[i] + "<br/>"); 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 Przykład - właściwości navigator <script type= "text/javascript"> for(i in navigator) {.write( i + " " + navigator[i] + "<br/>"); reguły pozwala na dokładną identyfikację przeglądarki 49 50 Przykład - informacja o przeglądarce ff=navigator['useragent']; //ff=navigator.useragent;.write("<p>korzystasz z przeglądarki: " +ff + "</p>"); 51 9