Ciekawe i istotne rozwiązania dla stron www
DOM JAKO STRUKTURALNA REPREZENTACJA DOKUMENTU I PROGRAMOWY INTERFEJS
DOM, czyli The Document Object Model zakłada, że strona www jest dokumentem z precyzyjna strukturą. Strona owa może być wyświetlona w oknie przeglądarki, lub pokazana jako żródłowy kod HTML. W obu przypadkach jest to ten sam dokument. DOM jest programowym interfejsem dla dokumentów w HTML oraz XML. DOM stanowi strukturalną reprezentację dokumentu i definiuje sposób w jaki ta struktura może być dostępna dla programów, tak by mogły owe programy zmieniać strukturę dokumentu, jego styl i zawartość. DOM stanowi reprezentację dokumentu, jako usystematyzowanej grupy węzłów (nodes )i klas (objects),posiadających właściwości(properties) i metody (methods). Zasadniczo DOM łączy strony web ze skryptami i językami programowania. DOM został stworzony przez organizację W3C, która zajmuje się ustalaniem standardów pisania i przesyłania stron www.
Ustalenia World Wide Web Consortium, czyli W3C, nie mają mocy prawnej, ale zrzesza ona około 400 organizacji,firm,organizacji rządowych z całego świata. Istnieją na razie cztery poziomy DOM, ostatni,czyli trzeci (bo pierwszy to nieoficjalny,zerowy) ma sześć specyfikacji.
Przykładowa struktura dokumentu
Odzwierciedlenie schematu w postaci znaczników HTML
Węzeł; 'Rodzic'; 'Dziecko'; 'Rodzeństwo'. Czyli Node; Parent; Child ; Sibling.
Pojęcia :node;parent;child;sibling określają pozycję elementów HTML w hierarchicznej,drzewiastej strukturze dokumentu. Są też częścią nazw fukcji (methods) DOM. Nodes (węzły) to w zasadzie tagi z określeniem ich położenia w dokumencie. Node na czele dokumentu to root node ( węzeł źródłowy ).Jest bez 'parent'. Każdy węzeł ma tylko jednego rodzica ( parent). Węzeł może mieć dowolną liczbę children. Jeśli nie ma żadnych, nazywany jest liściem-a leaf. Węzły od tego samego rodzica to siblings (rodzeństwo).
W naszym przykładzie 'html' ma dwoje dzieci; 'body' ma czworo, w tym dwa 'div'. Np. 'body' jest sibling 'head'. Rzecz istotna: tekst jest zawsze zawarty w node 'Text'. Np. zapis <p >Wpisana treść </p >. Błędem byłoby oczekiwać,że 'Wpisana treść' to value (wartość)node 'p'. Jest to value node 'Text' który stanowi child node 'p'. Aczkolwiek istnieje property (własność) innerHTML która pozwala uzyskać dostęp do tekstu.
Funkcje ; właściwości czyli methods; properties
Pojęcie 'funkcja' odnosi się ogólnie do zapisu wykonującego jakieś działanie .Np.uzyskanie dostępu do elementu; zmiana lub usunięcie elementu. Właściwość to zapis stanu istniejącego, np nazwa elementu, wartość nadana atrybutowi. Przykładowe metody HTML DOM to: (zamiast 'document' może być użyty inny węzeł)
- document.getElementById("id")
- document.getElementsByTagName("tag")
- document.appendChild(node)
- document.removeChild(node)
Przykładowe properties HTML DOM
- node.innerHTML
- node.nodeName
- node.nodeValue [dla elementu jest zawsze
undefined] - node.childNodes
- node.attributes
Uzyskać dostęp do węzła można trzema sposobami:
1.Używając metody getElementById.
Zapis:<p id="p1">p z id p1 </p>
<script type="text/javascript">
function zmienTekst()
{
document.getElementById("p1").style.color="red";
document.getElementById("p1").style.fontSize="larger";
document.getElementById("p1").innerHTML="Nastąpiła zmiana tekstu";
}
</script>
WYKONANIE
p z id p1
<input type="button" onclick="zmienTekst();setTimeout('restoreText2()',2000)" value="Kliknij,by zmienić tekst w powyższym paragrafie" title="Zmiana stylu i treści tekstu następuje za pomocą funkcji getElementBy Id">Powyżej,jako tzw event handler wpisałem pod event,czyli zdarzenie 'onclick' dwie funkcje. Pierwsza to 'zmienTekst',która zmienia kolor,wielkość czcionki oraz treść w paragrafie o id=p1. Druga to też funkcja DOM: 'setTimeout'. Ta druga po 2000 milisekundach (2 s) uruchamia nie pokazaną tu funkcję 'restoreText2', która przywraca wygląd i treść pierwotną paragrafu. Tę drugą funkcję dodałem wyłącznie dla wygody czytelnika. Inaczej należałoby odświeżać stronę,by jeszcze raz np. zmienić tekst. Ta uwaga dotyczy także kolejnych przykładów.
2.Używając metody getElementsByTagName.
Zapis:
<p >Ten paragraf ma index 12.Pierwszy paragraf na stronie ma index 0. </p>
<script type="text/javascript">
function zmienTekst1()
{
ala= document.getElementsByTagName("p");
ala[12].style.color="red";
ala[12].style.fontSize="larger";
ala[12].innerHTML="Nastąpiła zmiana tekstu w tym paragrafie. Jednym z wielu.";
}
</script>
WYKONANIE
Ten paragraf ma index 12.Pierwszy paragraf na stronie ma index 0.
<input type="button" onclick="zmienTekst1();setTimeout('restoreText3()',2000)" value="Kliknij,by zmienić tekst w powyższym paragrafie" title="Zmiana stylu i treści tekstu następuje za pomocą funkcji getElementBy Id">Tutaj,jako event handler użyłem funkcji własnej która zawiera metodę DOM: getElementsByTagName. Zwraca ona wszystkie znaczniki (elementy)na stronie w tym przypadku 'p' w postaci array. Trzeba policzyć numer tagu o który nam chodzi (index w array zaczyna się od zera,czyli pierwszy paragraf na stronie ma index 0) i jemu przypisać style czy atrybuty które chcemy wprowadzić. Tutaj array zawarliśmy w variable ala a interesujący nas paragraf ma index 12.
3.Nawigując po stronie z użyciem właściwości (properties): parentNode; firstChild; lastChild.
Zapis:
<div > <p >Ten paragraf znajduje się wewnątrz div i ma id="wewn". </p></div>
<script type="text/javascript">
rodzic= document.getElementById("wewn");
document.write("Zdradzę Wam jak brzmi tekst w paragrafie o id=wewn.Oto jak: "+"<span style='color:red'>" + rodzic.firstChild.nodeValue +"</span>");
</script>
WYKONANIE
Ten paragraf znajduje się wewnątrz div i ma id="wewn".
W tym przykładzie nie tworzymy żadnej funcji własnej. W document.write oczekujemy podania wartości (value)węzła będącego pierwszym dzieckiem elementu rodzic. Inaczej mówiąc firstChild jest tu właściwością (property) obiektu rodzicPonieważ w tym przypadku obiektem jest paragraf,jego dzieckiem jest węzeł 'Text' a wartością (value) węzła jest treść. Tak przy okazji:funkcji nie tworzymy m.in,bo document.write pod funkcją pisze nową stronę. Można też zauważyć,że document.write()może pisać tekst z tagami HTML.
Właściwość,czyli property dokumentu o nazwie body pozwala na bezpośredni dostęp do'body'
Przykład:zmieniamy kolor tła wykorzystujac powyższe:
<script type="text/javascript">
function zmienTlo()
{
document.body.style.backgroundColor="green";
}
function restoreBackground()
{
document.body.style.backgroundColor="#FFFFFF";
}
</script>
<input type="button" onclick="zmienTlo();setTimeout('restoreBackground()',2000)"
value="kliknij,by zmienić na 2 sekundy kolor tła" title="Zmiana stylu body z wykorzystaniem bezpośredniego dostępu do tego elementu ">