Feb
Document Object Model - Del 1
Kategorier: (X)HTML Javascript WebstandarderDocument Object Model är ett gränsnitt som tillåter program och script att ändra en webbsida dynamiskt. Det där lät ju lagom roligt och pedagogiskt. Vi kan säga så här: Om du inte hängde med på den första meningen, läs vidare så ska den här artikeln försöka förklara vad just den meningen betyder och även mer än så.
När din webbläsare hämtar ner en webbsida från en server kommer den webbsidan att ritas upp internt i webbläsaren innan den visas för dig som användare. Denna interna uppritning, eller presentation, är ett objekt. I webbläsarens värld kallas en webbsida för ett dokument (engelskans document). Därför kallas denna interna presentation för dokumentobjektet (document object). För att en webbläsare ska rita upp detta dokumentobjekt på rätt sätt måste den följa en viss standard, en modell. Om den inte gjorde det skulle olika webbläsare tolka innehållet olika, varför det skulle spela stor roll kommer vi fram till lite senare. Modellen beskriver i vilken ordning element kommer, hur de förhåller sig till varandra och mycket annat. När detta objekt ritas upp internt i webbläsaren skapas ett så kallat DOM-träd (DOM-tree). Anledningen till att det kallas träd är för att den logiska uppbyggnaden av dokumentet påminner om ett träd.
Dokumentobjektsmodellen, eller DOM som jag kommer att kalla den från och med nu, är en standard skapad av W3C. Det finns olika versioner av den, men den vanligaste idag är version 2, och det är den som de flesta webbläsare stödjer. Den beskriver hur en webbläsare ska bygga upp en webbsida internt, samt på vilka olika sätt man ska kunna manipulera innehållet utan att behöva ladda om webbsidan och koden igen.
Det absolut vanligaste sättet att ändra i detta DOM-träd är med hjälp av javascript, och använder man de standardiserade metoder som finns i DOM, så kallas det för DOM-scripting. Den stora fördelen med att ha en DOM-standard är att de allra flesta webbläsare har dessa funktioner som man använder sig av för att manipulera innehållet. Detta gör att du kan skriva ett javascript som fungerar i en webbläsare och med ganska stor säkerhet kommer det att fungera likadant i övriga (moderna) webbläsare.
Hur ser då dessa DOM-träd ut? Om vi tänker oss en väldigt liten sida med lite innehåll, så kan det se ut såhär:
Koden för detta träd skulle se ut såhär:
<html>
<head>
<title></title>
</head>
<body>
<ul></ul>
<div></div>
<div></div>
</body>
</html>
Längst ner vid rötterna har vi Dokument-objektet, sedan kommer HTML-elementet och de välkända HEAD- och BODY-elementen. Efter detta förgrenar sig elementen ut i en trädstruktur. Givetvis kallas det inte grenar, det vore för enkelt, utan noder (eng. nodes). Varje html-element är en nod och varje liten bit text är en nod. Det finns flera olika sorters nodtyper, men att gå igenom dem ingår inte i denna artikel. Om du vill undersöka hur DOM-trädet ser ut för en webbsida finns det utmärkta verktyg för detta. Ett bra exempel är DOM Inspector som ingår i Firefox. Med hjälp av denna kan du lätt se hur Firefox har tolkat och ritat upp webbsidan enligt DOM.
För att inte denna artikel ska bli för lång och tråkig väljer jag att bryta den här. En fortsättning som tar upp mer om innehållet i DOM och hur de olika noderna förhåller sig till varandra kommer snart!
TYCKTE DU OM ARTIKELN?
