Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Obiekty DOM
2
DOM Document Object Model
stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia sposób przedstawienia dokumentu. zestaw metod i pól, które umożliwiają odnajdywanie, zmienianie, usuwanie i dodawanie elementów. jest podzielony na dwie części. podstawowa (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 JavaScript) albo encją. typowy dla przeglądarek DOM HTML. Jest to zestaw metod ułatwiających tworzenie dynamicznych stron oraz zapewniających kompatybilność wstecz. DOM HTML przedstawia dokument jako kilka kolekcji obiektów określonych typów (np. formularze, obrazki)
3
DOM Document Object Model
4
Tworzenie obiektów modelu DOM
<HTML> <HEAD>… </HEAD> <BODY> <FORM NAME=f1> <INPUT TYPE=TEXT NAME=p1> <INPUT TYPE=SUBMIT> </FORM> <IMG NAME=obraz SRC=”o.gif”> </BODY> </HTML> window.document.f1.p1 window.document.obraz
5
Obiekt – właściwości Właściwości określają pewne atrybuty obiektów. Właściwości można odczytywać i/lub zmieniać. Niektóre właściwości są tylko do odczytu lub tylko do zapisu!!! Odczytanie wartości właściwości: nazwaObiektu.nazwaWłaściwości Zmiana wartości właściwości nazwaObiektu.nazwaWłaściwości=wartość
6
Obiekt – metody nazwaObiektu.nazwaMetody()
Metoda definiuje akcje (czynności), jakie można wykonać na obiekcie. Wywołanie metody dla obiektu powoduje wykonanie akcji. Metodę można przyrównać do funkcji skojarzonej z obiektem. nazwaObiektu.nazwaMetody() NazwaObiektu.nazwaMetody(parametry)
7
Obiekt – zdarzenia Każdy obiekt może reagować na pewne zdarzenia. Obsługa zdarzenia polega na wykonaniu zdefiniowanych dla danego obiektu i zdarzenia instrukcji języka. <INPUT TYPE=BUTTON onClick=”window.alert(’hej!’)”> <BODY onLoad=”start()”>
8
Zdarzenia onAbort onBlur onChange onClick onDrag onError onFocus
onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload
9
Obiekt - window Wybrane właściwości: status, self, parent, name, opener, document Wybrane metody: open(URL, nazwaOkna, parametry) close() alert(tekst) confirm(tekst) zwraca true lub false prompt(tekst, wartpocz) zwraca wartość lub null
10
Obiekt - document Wybrane właściwości: bgColor, forms[ ], images[ ], title Wybrane metody: document.write(tekst) document.writeln(tekst) document.close()
11
Obiekt - ciąg tekstowy Właściwości obiektu string: length
Metody obiektu string: string.toUpperCase() string.toLowerCase() string.charAt(pozycja) string.substring(n,m) string.substr(n,ile) string.indexOf(wzorzec,poz)
12
Nazwy obiektów i identyfikatorów
Nazwy obiektów HTML nadawane są przez parametr NAME= dowolnego znacznika Nazwa identyfikatora: musi zaczynać się od litery lub znaku podkreślenia _ może zawierać wyłącznie litery, cyfry i znak podkreślenia wielkość liter jest rozróżniana !!!
13
Przykład <p id="paragraf">Ten napis zawiera <strong id="bold"> pogrubiony tekst</strong></p> <p>Lorem ipsum</p> document.getElementById('paragraf') //wskazuje na akapit document.getElementById('bold') //wskazuje na znacznik strong document.getElementsByTagName('p') //kolekcja akapitów document.getElementsByTagName('p')[0] //wskazuje na pierwszy akapit document.getElementsByTagName('p')[0].getElementsByTagName('strong')[0] //pobieramy pierwszy akapit, a w nim pobieramy pierwszy strong document.getElementById('paragraf').getElementsByTagName('strong') //kolekcja znaczników strong znajdujących się w akapicie paragraf
14
document. getElementById('paragraf')[1]
document.getElementById('paragraf')[1].firstChild //pierwsze dziecko 2 akapitu document.getElementById('cos').childNodes[1] //drugie dziecko elementu cos document.getElementById('cos').parentNode //element rodzic w którym leży element cos
![document. getElementById( paragraf )[1]](http://slideplayer.pl/slide/3643426/11/images/14/document.+getElementById%28+paragraf+%29%5B1%5D.jpg "document.getElementById( paragraf )[1].firstChild //pierwsze dziecko 2 akapitu. document.getElementById( cos ).childNodes[1] //drugie dziecko elementu cos. document.getElementById( cos ).parentNode //element rodzic w którym leży element cos.")
15
Dziękuję za uwagę
Podobne prezentacje
