Webbprogrammering med HTML, CSS, DOM, Javascript, DHTML, MySQL och PHP

Strukturen

Hur ser strukturen ut? För enkelhetens skull kan vi beskriva alla HTML-element i ett dokument som noder i DOM.

En nod är, om vi tittar på landets järnvägssystem, en station. Stationerna är sammankopplade med järnvägsräls vilket i DOM är en slags relation. Varje station (nod) går att komma till från den station som ligger närmast och på så sätt går det att komma åt alla noder. Vi tittar på ett enkelt exempel.


<HTML>

	<BODY>

		<H1>Den största rubriken.</H1>

		<H2>Den näst största rubriken.</H2>

	</BODY>

</HTML>

Det här är ett enkelt HTML-dokument som endast innehåller en rubrik i kroppen. Om man tittar på hur texten är inskjuten kanske man listar ut hur strukturen ska se ut.

Det här är alltså strukturen i HTML. För DOM ser det lite annorlunda ut men vi kan tänka oss det såhär. Vi säger att HTML-elementet har BODY som barn, eller att det innehåller BODY. HTML-elementet är på samma sätt förälder till BODY. Vi kommer att använda detta sätt att beskriva dokumentet så var säker på att du förstår hur det fungerar. Ofta säger vi också att strukturen är ett träd och vi tänker oss då ett familjeträd där föräldrar har barn och barnbarn i flera led.

Följande saker händer när du öppnar en sida med din webbläsare:

Webbservern hämtar den sida som du har frågat om och skickar den till din dator
Webbläsaren (datorn) läser in sidan i minnet
Webbläsaren omvandlar HTML-koden till ett format som den förstår - DOM
Webbläsaren visar HTML-sidan för dig
Den DOM som har skapats finns i webbläsarens minne och kan ändras utan att webbservern behöver vara inblandad. Ändringarna sker då endast på klientsidan och vi pratar då om Dynamisk HTML, DHTML

När hela dokumentet är inläst läggs allt som finns på sidan till som barn i något led till document i DOM. På varje nivå bildas det vektorer som innehåller de element som finns där. I exemplet ovan blir det alltså en barnvektor i BODY som innehåller de båda rubrikerna H1 och H2. Dessa har i sin tur en nod under sig som innehåller text. Barnnoder som bara innehåller text kallar vi helt enkelt för textnoder. Vi kan nu fråga dokumentet efter någon av dess noder för att få tillgång till det. T ex anger document.childNodes[0] BODY's första barn som är H1-rubriken.

Vi skriver om vårt tidigare exempel lite och inför ett par nya element samt id-märkning på elementen. När ett element har ett unikt id går det lätt att komma åt genom att använda sig av metoden getElementById() och skicka med namnet på det id man vill ha.


<HTML>



<BODY>



<H1 id="rubrik1">Den största rubriken.</H1>

<P id="text1">

	En text som ligger i en <B>paragraf</B>

</P>



<H2 id="rubrik2">Den näst största rubriken.</H2>



En text som inte ligger i en paragraf.



</BODY>



</HTML>

Vill vi nu komma åt texten inne i H2-rubriken kan vi använda oss av (bland annat) följande tre sätt:


document.childNodes[2].firstChild;

document.getElementById('rubrik2').firstChild

document.getElementsByTagName('H2')[0].firstChild

Som ni säkert förstår tar metoden firstChild ut det första av barnen för en viss nod. Det finns fördelar och nackdelar med de olika sätten. Använder man sig av någon av de metoder som hämtar noder från en vektor får man ett fel om vektorn är tom eller det element man ville åt saknas. T ex hade inte document.childNodes[2] (som är det TREDJE barnet) fungerat i vårt första exempel där det bara finns två barn till document. På samma sätt kan man från varje nod komma åt dess förälder genom metoden parentNode.

föregående gå vidare