Hierarchia dokumentu

Czym jest hierarchia?

Każda strona HTML składa się z elementów.

Na samej górze jest kontynent - czyli okno przeglądarki - window, które zawiera w sobie wszystkie obiekty, funkcje i właściwości. W tym oknie znajduje się nasze małe państewko - obiekt document (czyli nasza strona). W tym państewku żyje od groma i tyć tyć różnych obiektów. W naszych skryptach będziemy operować na tych obiektach, nakazując im wykonywanie różnych rzeczy (jakież to wszystko podobne do realnego życia!)

Do odzwierciedlenia ułożenia elementów JS korzysta z DOM. DOM czyli Document Object Model to stworzony przez W3C model ułożenia elementów na stronie - czyli hierarchia. DOM nie tylko opisuje ułożenie elementów, ale udostępnia mnóstwo metod, które ułatwiają poruszanie się po tych elementach i manipulowanie nimi.

W czasach gdy DOM jeszcze nie istniał, JS był mało semantyczny. Istaniały wprawdzie pewne metody, kolekcje obiektów, odwołania do dokumentu itp, ale wszystko to miało mało spójny charakter. Dzięki DOM wszystko to zostało podane nam w logiczny sposób, dzięki czemu pisanie skryptów nabrało nowego wymiaru.

W kursie tym skupimy się właśnie na wykorzystaniu DOM, a wszelkie starodawne techniki pozostawimy w miejscu gdzie powinny być - w przeszłości.

Przypuśćmy, że stworzyliśmy stronę:

	<html><head>
		<title>To jest tytuł strony</title>
	</head>
	<body>
		<p>Ten napis zawiera <strong>pogrubiony tekst</strong></p>
	</body>
	</html>

Nasz dokument możemy rozrysować jako hierarchiczne drzewo. Na samej górze jest document HTML, a tuż pod nim znajdują się jego "dzieci" (inna nazwa to korzenie - nody) - czyli elementy znajdujące się w document.

Hierarchiczne ułożenie elementów na stronie

Odwoływanie się do obiektów

Gdy DOM jeszcze nie istniał, odwoływanie się do obiektów wymagało korzystania ze specjalnych kolekcji. Większość obiektów na stronie pogrupowana jest w kolekcje które są swego rodzaju tablicami. I tak dla przykładu mamy kolekcję forms, która zawiera wszystkie formularze na naszej stronie, kolekcję images, która zawiera wszystkie img na naszej stronie, kolekcję links zawierającą linki itp. Korzystanie z takich kolekcji było całkiem miłe (np. żeby pobrać 1 formę na stronie korzystaliśmy z instrukcji forms[0]), jednak miało swoje wady. Pierwszą było to, że kolekcji tych była ograniczona liczba. Mogliśmy oczywiście pobierać formularze, obrazki i podsawowe typy obiektów wystepujące na stronie, ale nie mieliśmy możliwości pobrać każdego typu obiektu. Drugą wadą - może nieco mniejszą, ale dla początkujących uciążliwą - była konieczność nauki nazw wszystkich takich kolekcji. Na szczęście w dzieiejszych czasach możemy posługiwać się DOM'em i jego metodami. Dzięki temu mamy dostęp do wszystkich elementów na stronie i wcale nie musimy pamiętać żadnych nazw kolekcji - bo to my sami je tworzymy!

Aby odwołać się do elementów na stronie, skorzystamy z metod getElementById lub getElementsByTagName. Tą pierwszą użyjemy wtedy, gdy nasz element ma atrybut id. Ta druga służy do pobrania kolekcji zawierającej elementy danego typu.

Przykładowo jeżeli na naszej stronie będziemy mieli akapit:

	<p id="paragraf">Ten napis zawiera <strong id="bold">pogrubiony tekst</strong></p>
	<p>Lorem ipsum</p>

to odwołanie się do naszych elementów z poziomu skryptu będzie miało postać:

	document.getElementById('paragraf')											//wskazuje na nasz akapit
	document.getElementById('bold')												//wskazuje na nasz znacznik strong
	document.getElementsByTagName('p')											//kolekcja akapitów
	document.getElemensByTagName('p')[0]										//wskazuje na pierwszy akapit
	document.getElemensByTagName('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

	//poniższe sposoby poznamy w następnym rozdziale :)
	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