Obiektowy model dokumentu
Listing 9.1. Kiedy osoba odwiedzająca stronę kliknie na obrazku o nazwie „ bultonl ”, to zostanie w nim wyświetlony plik o nazwie „ button on.gif zamiast pliku .. button _off.gif ’
<html>
<head>
<met_a http-equiv="Content-Type"
->conr.ent ntext/html; charset=ISO-8859-2"> <title>Listing 9.1</title>
</head>
<body bgcolor="#FFFFFF">
<a href="Listing-9-l.htm" onMouseOver - "document. images .butroni. src= 'button on.gifł">
<img src="button_off.gif*' name = ,,buttonl">
</a>
</bod;/>
</html> window ->
(parent) ->
(frame) ->•
document
ID
-> image -> link a n chor -* form
Rysunek 9.1. DOM dziata poprzez wytyczenie ścieżki wiodącej począwszy od skryptu aż do pojedynczego elementu, z którym chcesz coś zrobić, znajdującego sit; wewnątrz dokumentu
obiektu znajdującego się przed nim
Jeśli kiedykolwiek używałeś jakiegokolwiek języka skryptowego, to jest więcej niż pewne, że już widziałeś DOM w akcji. DOM działa poprzez opisanie ścieżki od funkcji JavaScriptu do elementu wyświetlonego w oknie przeglądarki, zazwyczaj w odpowiedzi na coś, co się zdarzyło na ekranie. (Patrz rysunek 9.1).
document.images.button1.src = "button_on.gif"
Powyższy kod opisuje ścieżkę rozpoczynającą się od aktualnego dokumentu i wiodącą w dół, do umieszczonych w nim obrazków, aż do źródłowego położenia obrazka o nazwie „buttonl”. Jeśli, dla przykładu, powyższy kod zostanie skojarzony z procedurą obsługi zdarzeń onMouseOver, zdefiniowaną w połączeniu otaczającym obrazek o nazwie „button I” (patrz listing 9.1), to spowoduje on zmianę wartości atrybutu SRC obrazka zjego wartości oryginalnej na „button_on.gif’.
(Patrz „Nowe procedury obsługi zdarzeń” na następnej stronie.)
Jak działa DOM?
147