Ten rozdział ma dać ogólne pojęcie o DOM: co to jest, o strukturze dla dokumentów HTML i XML, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.
Model obiektowy dokumentu (ang. Document Object Model, DOM) stanowi API dla dokumentów HTML i XML. Odpowiada za dwie rzeczy: zapewnia reprezentację struktury dokumentu oraz określa, w jaki sposób odnosić się do tej struktury z poziomu skryptu. DOM przedstawia stronę jako strukturyzowaną grupę węzłów, co omówimy pokrótce. W gruncie rzeczy, DOM łączy stronę ze skryptami bądź językami programowania.
Zauważ, że DOM nie jest konkretną aplikacją czy produktem. Jest raczej interfejsem, API, które twórcy oprogramowania muszą zaimplementować, jeśli chcą spełniać standard W3C DOM. Mały przykład: każda przeglądarka internetowa musi zwracać wszystkie elementy <P> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę getElementsByTagName:
paragraphs = document.getElementsByTagName("P");
// paragraphs[0] to pierwszy element <p>
// paragraphs[1] - drugi element <p>, etc.
alert(paragraphs[0].nodeName);
Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt document, reprezentujący sam dokument, obiekt table, implementujący specjalny interfejs DOM HTMLTableElement, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.
Powyższy przykład, jak i inne w tej dokumentacji, napisano w JavaScript. Ściślej, został on napisany w JavaScript, ale korzysta z DOM, by manipulować stroną i jej elementami. DOM nie jest sam w sobie językiem programowania, ale bez niego język JavaScript nie miałby żadnego odniesienia do stron czy dokumentów XML i ich elementów. Każdy z elementów - jak nagłówek, tabele, nagłówki tabel, komórki tych tabel, tekst w tych komórkach - są częściami obiektowego modelu tego konkretnego dokumentu i, za pomocą DOM, język taki jak JavaScript może nimi operować.
DOM zaprojektowano tak, by był niezależny od języka programowania, dzięki czemu reprezentacja struktury dokumentu dostępna jest poprzez jedno, spójne API. W niniejszej dokumentacji skupimy się wyłącznie na JavaScripcie, jednak można stworzyć implementację DOM dla dowolnego języka - poniżej przykład w Pythonie:
# Przykład: DOM w Pythonie
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM - własność obiektu document;
p_list = doc.getElementsByTagName("para");
Aby zacząć korzystać z DOM, nie musisz robić nic szczególnego. Różne przeglądarki różnią się implementacją DOM, implementacje wykazują różny stopień zgodności z faktycznym standardem DOM (jest to kwestia, której staramy się unikać w niniejszej dokumentacji), ale każda przeglądarka używa jakiegoś obiektowego modelu dokumentu, by dać dostęp do strony z poziomu skryptu.
Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <SCRIPT>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów document lub window by manipulować samym dokumentem lub by przechwycić któregoś z potomków - elementów strony. Programowanie w DOM może być tak proste jak poniższy przykład, który wykorzystuje metodę alert() obiektu window, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.
<body onload="window.alert('Witaj!');">
Niezależnie od elementu <script>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza H1 do drzewa dokumentu.
<html>
<script>
// create a couple of elements
// in an otherwise empty HTML page
heading = document.createElement("h1");
heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
</script>
</html>
Założeniem tego przewodnika jest ograniczenie do minimum dyskusji o abstrakcyjnych interfejsach, dziedziczeniu i innych szczegółach implementacji, a zamiast tego omówienie obiektów w DOM, faktycznych
bytów
, jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML FORM pobiera własność name z interfejsu HTMLFormElement, a własność className z interfejsu HTMLElement. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie form.
Jednakże zależność między obiektami a interfejsami, jakie one implementują, może być myląca, dlatego w tym podrozdziale spróbujemy powiedzieć coś o faktycznych interfejsach w specyfikacji DOM oraz o tym, w jaki sposób są one dostępne.
W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. table - reprezentują kilka różnych interfejsów. Dla przykładu - table implementuje specjalny interfejs HTMLTableElement, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, table implementuje też interfejs Element, opisany w rozdziale Obiekt element. I wreszcie, ponieważ element HTML jest, jeśli mówimy o DOM, węzłem w drzewie węzłów, jakie tworzy obiektowy model strony internetowej czy XML, element table implementuje także bardziej podstawowy interfejs Node, z którego wywodzi się Element.
Kiedy otrzymasz referencję do obiektu table, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.
var table = document.getElementById("table");
var tableAttrs = table.attributes; // interfejs Node/Element
for(var i = 0; i < tableAttrs.length; i++){
// interfejs HTMLTableElement: atrybut border
if(tableAttrs[i].nodeName.toLowerCase() == "border")
table.setAttribute("border", "1");
}
// interfejs HTMLTableElement: atrybut summary
table.summary = "uwaga: zwiększono obramowanie";
W tej części wymienione zostaną niektóre z najczęściej używanych interfejsów DOM. Celem nie jest opisanie, co wymienione API robią, ale raczej by dać Tobie ogólne pojęcie o rodzajach metod i własności, jakie będziesz często widywał, używając DOM. Te API wykorzystano także w przykładach, jakie znajdziesz na końcu tej dokumentacji.
Obiekty document i window to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, window reprezentuje coś takiego jak przeglądarka, zaś document jest początkiem, górą całego dokumentu. Element dziedziczy z ogólnego interfejsu Node, zaś razem te dwa interfejsy odpowiadają za wiele metod i własności, jakich będziesz używał na konkretnych elementach. Elementy te mogą mieć też własne, osobne interfejsy, służące do obsługi konkretnego rodzaju danych, jaki przechowują - tak jak na przykład wspomniany wcześniej obiekt table.
Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.
document.getElementById(id)element.getElementsByTagName(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttributeelement.element.getAttributeelement.addEventListenerwindow.contentwindow.onloadwindow.dumpwindow.scrollToW dokumentacji tej znajdziesz do każdego interfejsu przykłady wykorzystania. W niektórych przypadkach są to kompletne strony HTML, działające z poziomu elementu <script>, z elementami (jak np. przyciski) niezbędnymi do uruchomienia skryptu, jak również elementami, którymi operuje DOM. W takim przypadku możesz po prostu skopiować przykład, wkleić go do nowego pliku, zapisać i uruchomić w przeglądarce.
Jednakże, w wielu przypadkach przykłady są bardziej zwięzłe. Aby uruchomić kod, który pokazuje proste relacje między interfejsem a elementami HTML, możesz chcieć stworzyć stronę testową. Poniżej znajdziesz właśnie taką, prostą stronę do testów - funkcje testujące możesz umieścić w znaczniku <script> w nagłówku, umieszczono też kilka elementów wraz z atrybutami, którymi możesz swobodnie manipulować, a także interfejs użytkownika, pozwalający wywoływać funkcje testowe z poziomu przeglądarki.
Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.
<html>
<head>
<title>DOM Tests</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
if(document.body) eval('document.body.'+attr+'="'+value+'"');
else notSupported();
}
</script>
</head>
<body>
<div style="margin: .5in; height="400"">
<p><b><tt>text</tt> color</p>
<form>
<select onChange="setBodyAttr('text',
this.options[this.selectedIndex].value);">
<option value="black">black
<option value="darkblue">darkblue
</select>
<p><b><tt>bgColor</tt></p>
<select onChange="setBodyAttr('bgColor',
this.options[this.selectedIndex].value);">
<option value="white">white
<option value="lightgrey">gray
</select>
<p><b><tt>link</tt></p>
<select onChange="setBodyAttr('link',
this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select> <small>
<a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(sample link)</a></small><br>
</form>
<form>
<input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>
By przetestować więcej interfejsów na jednej stronie - np. komplet własności zmieniających kolory strony - możesz stworzyć podobną stronę z całą konsolą przycisków, pól tekstowych i innych elementów HTML. Poniższy zrzut ekranu przedstawia przykładowy pomysł pogrupowania interfejsów do testów.
W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (bgColor), kolory linków (aLink), tekstu (text). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.