[home]
techniki internetowe[home] 20/VIII
[top]

W każdym wieku należy sobie zadawać następujące dwa pytania: Dlaczego robię to, co robię? Co innego mógłbym robić?

Langer

DOM — Obiektowy Model Dokumentu

Co to jest DOM?

DOM to skrótowiec na Obiektowy Model Dokumentu. DOM to API umożliające przetwarzanie, modyfikowanie, uaktualnianie i usuwanie części dokumentu HTML bądź XML.

Istnieją implementacje interfejsu DOM w różnych językach programowania. Poniżej przyjrzymy się implementacji DOM w JavaScripcie.

Poniższy kod to mieszanka `czystego' JavaScriptu i poleceń JavaScriptu implementujących DOM. Czy potrafisz rozróżnić `czysty' JavaScript od DOM. Co robi kod JavaScript a co — DOM?

var anchorTags = document.getElementsByTagName("a"); for (var i = 0; i < anchorTags.length ; i++) { alert("href elementu " + i + "to : " + anchorTags[i].href + "\n"); }

Czekając na utworzenie drzewa DOM dokumentu HTML

Po wczytaniu dokumentu HTML przeglądarka wykonuje kolejno:

Walk the DOM

function walkTheDOM(node, func) { func(node); node = node.firstChild; while(node) { walkTheDOM(node, func); node = node.nextSibling; } }

Jak uzyskujemy dostęp do DOM?

Każda przeglądarka implementuje DOM API. Dlatego zawsze mamy dostęp do drzewa dokumentu. Oto prosty przykład pokazujący jak umieścić w drzewie dokumentu:

<h1>hello world</h1>

Zmiany drzewa dokumentu powodują natychmiastową zmianę wyglądu dokumentu w oknie przeglądarki. W przykładzie korzystamy z API elementu document.

<html> <head> <script type="text/javascript" charset="utf-8"> window.onload = function() { heading = document.createElement("h1"); heading_text = document.createTextNode("hello world"); heading.appendChild(heading_text); document.body.appendChild(heading); } </script> </head> <body> <!-- tutaj zostanie wstawiony dynamicznie generowany element h1 --> </body> </html>

Przykład ten pokazuje, że nawet coś tak banalnego jak wstawienie elementu wymaga sporo kodu. Ułatwimy sobie kodowanie jeśli skorzystamy z jakiejś biblioteki która dostarcza wygodnych funkcji. Najpopularniejszą obecnie biblioteką jest Prototype. Tak może wyglądać przepisany na nowo w Prototype ten przykład.

<html> <head> <script src="/javascripts/prototype.js" type="text/javascript"></script> <head> <body id="main"> <script type="text/javascript" charset="utf-8"> //<![CDATA[ window.onload = function() { new Insertion.Top('main', "<h1>hello prototype<\/h1>"); } //]]> </script> </body> </html>

Nawet tak prosty przykład jak ten należy inaczej zakodować. Taki sposób jak wyżej jest wygodny jeśli coś sprawdzamy albo wyjaśniamy komuś. Zawsze arkusze stylów i kod javascript powinny znajdować się w zewnętrznych plikach włączanych do dokumentu. Oto przykład, pokazujący jak to zrobić:

Szablon template.html strony HTML korzystającej z bibliotek prototype.js, effects.js, lowpro.js oraz własnego kodu javascript template.js oraz zewnętrznego arkusza stylów template.css

Plik template.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="/images/favicon.ico" rel="SHORTCUT ICON"> <link href="/stylesheets/template.css" media="all" rel="Stylesheet" type="text/css"> <script src="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/effects.js" type="text/javascript"></script> <script src="/javascripts/lowpro.js" type="text/javascript"></script> <script src="/javascripts/template.js" type="text/javascript"></script> <title>prototype template</title> </head> <body id="main"> <h1>prototype template</h1> <script type="text/javascript"> </script> </body> </html>

Plik template.js

// tworzymy prywatną przestrzeń nazw var Template = { init: function() { new Insertion.Top('main', "<h1>hello prototype world</h1>"); } } document.observe('dom:loaded', Template.init);

Zobacz też Low Pro: Unobtrusive [nie rzucajacy się w oczy, dyskretny] Scripting For Prototype (przykład).

I jeszcze jeden przykład pokazujący jak manipulować elementami i inny przykład korzystajacy ze zdarzeń.

Na koniec przykład manipulujacy atrybutami. Jeśli klikniemy na element definiujący hasła DT z listy definiowalnej DL, to zostanie rozwinięta definicja DD z opisem hasła.

<dl> <dt>foo</dt><dd> First on the standard list of ...</dd> <dt>grok</dt><dd> When you claim to ‘grok’ some knowledge ...</dd> <dt>Zawinski's Law</dt><dd> Every program attempts to expand until ...</dd> </dl>

Początkowo opisy hasła są ukryte za pomocą CSS:

dd { display: none; }
[Jon Anderson, 1978]

Sudden problems shouldn't take away the startled memory.
All in all, the journey takes you all the way.
As apart from any reality that you've ever seen and known.
Guessing problems only to deceive the mention,
Passing paths that climb halfway into the void.
As we cross from side to side, we hear the total mass retain.

YES, Close to the Edge

Zastosowania: Web 2.0 & Ajax

DOM Level 0, Dom Level 1

Historia (1998), czyli DOM level 1 Core Specification

Wiki na temat DOM: Obiektowy model dokumentu

W przykładach będziemy korzystać z właściwości i metod elementu document i elementu window. Zobacz też DOM interfaces

DOM Level almost 2. Tak teraz się nie programuje. Teraz korzystamy z bibliotek.

I jeszcze kilka przykładów

Peter-Paul Koch. Table of Contents script

DOM Level 2

I wreszcie współczesny (2000) DOM Level 2 Core Specification i pozostałe DOM-y

[Peter-Paul Koch]

Events are the beating heart of any JavaScript application

Peter-Paul Koch

Mały słowniczek: event propagation — propagacja zdarzeń, bubble phase — faza pęcherzykowa, capturing phase — faza przechwytywania;
element.addEventListener(* , *, false) oznacza, że procedura obsługi zdarzenia jest zwykłą procedurą, wyzwalaną, gdy zdarzenie nastąpi bezpośrednio w obiekcie lub potomkach elementu i będzie się propagować pęcherzykowo do elementu; zob. też element.removeEventListener(* , *, true)

Zdarzenia: Introduction to Events, The events, Event example (z http://www.quirksmode.org), Keyboard events, Mission Impossible — mouse position

Tajemnicze this. W DOM jest referencją do elementu w którym wystąpiło zdarzenie: Object-Oriented Event Listening through Partial Application in JavaScript

element.addEventListener('click', zróbCoś, false); inny_element.addEventListener('click', zróbCoś, false); function zróbCoś() { this.style.backgroundColor = '#cc0000'; }

SVG + DOM = nowe możliwości

Prototype

Emacs może być pomocny w przygotowywaniu i testowaniu przykładów. Bardzo użyteczny jest pakiet templates oraz sgml mode.

Najporęczniejsze metody biblioteki Prototype mają bardzo krótkie nazwy: $, $$, $A, $F, $H, $R, $w. Równie poręczne są: Try.these oraz document.getElementsByClassName, chociaż ich nazwy nie są krótkie.

Podstawy: $, $$, Enumerable.invoke, Element.innerHTML, Insertion.Top, Element.hide, Element.visible, Element.toggle, Event.observe

Ajax: $, Ajax.Request, Ajax.Updater, Event.observe

Scriptaculous

Zobacz run_functional_tests.html w scriptaculous-js-1.7.0.tar.gz

Materiały w sieci

[top]