Vad är en DOM?

1. Inledning

Den här sidan beskriver vad en DOM är och vad en sådan gör. Du får lära dig grundläggande begrepp, som kommer att vara till hjälp på senare sidor i den här sektionen.

Uttrycket DOM står för "Document Object Model" och översätts ibland med dokumentobjektmodell. En DOM används tillsammans med Xhtml eller Xml och stilmallar, olika scripts, m.m.

2. Begreppet "objekt"

När man pratar om objekt i datorsammanhang kan man mena olika saker. Det kan t.ex vara en bild, en animation eller ett ljud som infogats i ett dokument. Det kan vara en rubrik, ett stycke text, en behållare för text, en bit kod eller en instruktion.

Programmerare pratar ofta om objektinriktade språk. Enkelt utryckt kan man säga att sådana språk används för att skapa samlingar av objekt, vilka i sin tur utgör program och applikationer. Jag berättar mer om objektorienterad programmering på mina sidor om Programmering (särskilt "Programspråk" och "Java"). Gå dit >

En klocka är ett objekt, men även klockan består i sin tur av objekt, som visare, siffror, urtavla, osv. Ett objekt är alltså något avgränsat och något som går att peka ut. Beroende på hur avgränsningen har gjorts (vad man pekar ut) så kan ett objekt alltså vara olika saker.

3. Objekten i en DOM

Ordet "objekt" kan alltså referera till olika saker och företeelser. Tittar vi närmare på ordet "dokumentobjektsmodell" så förefaller det som om det är en modell eller skiss över hur olika objekt bygger upp dokument. Men vilka objekt då?

Enskilda språk
Heter ibland även "core languages" och kan t.ex. vara Html, Xml, Css, JavaScript, VBScript, Perl, Python, osv. En DOM berättar vilket språk som används i koden som bygger upp en webbsida.

Enskilda element Kallas även "page elements" och är t.ex. knappar, textfält och menyer. En DOM anger vilka element som får användas på en webbsida.

Enskilda objekt Eller "document objects", t.ex formulär som går att skicka från en webbsida. En DOM anger hur webbläsaren skall tolka elementen på en webbsida.

Varje språk har en egen specifikation, som talar om vilka element, attribut, händelsehanterare och annat som får förekomma och hur de skall tolkas.

Alla webbläsare använder en DOM, men tyvärr inte alltid samma version. Enkelt uttryckt så motsvarar varje versionssiffra bakom webbläsarna också en version av en DOM. Till detta kommer att Internet Explorer och Netscape, liksom många andra webbläsare, använder olika varianter av en DOM-version. Detta medför att en kombination av objekt i en webbläsare inte alltid tolkas likadant i en annan.

4. DOM och Dhtml

Under slutet av 90-talet började webbutvecklare skapa dynamiska dokument, genom att kombinera Html med olika scripts och stilmallskod. Tekniken kallades Dhtml eller "Dynamisk Html" och med den skapades webbsidor som på olika sätt förändrades då besökarna interagerade med dem.

Många ville lära sig Dhtml men det var svårt att skriva för mer än en webbläsarversion i taget, eftersom det inte fanns någon riktig standard. Man tvingades därför ofta göra flera olika versioner av sina webbsidor för olika webbläsare.

Denna omständighet kombinerad med bristen på en standard gjorde att många övergav Dhtml eller blott utvecklade sina webbsidor för en variant eller version av webbläsare. Ytterligare andra struntade i Dhtml och gjorde sin sajt i Flash eller andra program i stället.

Det var med denna bakgrund som W3C började ta fram olika DOM för olika varianter av webbsidor. Den som idag vill använda Html ihop med stilmallar, JavaScript och annat har alltså standarder att följa och får på så vis vägledning om hur koden skall skrivas.

Du kan läsa mer om Dhtml på sidan om just detta. Gå dit >

5. DOM-versioner

Den första versionen av DOM utvecklades alltså av W3C och lanserades i slutet av 1997. Den kallades DOM 1.0, men har sedan redigerats flera gånger. DOM 1.0 stöds idag av de flesta webbläsarna, även om stödet kanske inte gäller alla dess möjligheter.

Något förvirrande finns det sedan olika nivåer av DOM 1.0:

Nivå 0
Nivå noll är den första varianten av DOM, som kom samtidigt med webbläsarna med versionsnummer 3. Den utgör dock ingen standard och är idag knappast längre använd i sin helhet.

Nivå 1
Detta brukar räknas som den första egentliga standarden. Den innebär att man både kan läsa (som i Nivå 0) och skriva till ett dokument, både när dokumentet laddas som när det redan har laddats. DOM Nivå 1 har stöd för Html 4.0 och Xml 1.0. Standarden blev färdig i oktober 1998. Denna nivå stöds i stort sett av Internet Explorer 5, medan Netscape 6 bara har sporadiskt stöd.

Nivå 2
Denna DOM blandar funktionerna i de lägre nivåerna och lägger dessutom till möjligheten att koppla och ändra formatmallarna till ett dokument, tack vare stödet för CSS. DOM Nivå 2 blev standard i januari 2003.

Nivå 3
Antogs i januari 2004. Den har fullt stöd för XML och anger hur webbsidor skall uppdateras dynamiskt, vilket bl.a underlättar för alla som använder sig av servertekniker som ASP.

6. Den hierarkiska modellen

Hur fungerar då en DOM? Ja, det kan vara lite svårt att förklara, men enkelt uttryckt beskriver den hur objekten på en sida förhåller sig till varandra.

Detta kan dock innebära olika saker, beroende på vilket dokument som avses. I princip två olika metoder går att använda för den hierarkiska modellen, dels att man delar in dokumentet efter vilka objekt som ingår i den, dels att indelningen i stället görs efter hur objekten förhåller sig till varandra.

Den första metoden skulle kunna se ut så här:

En DOM innehåller eller definierar en eller flera sådana här hierarkier. Här har jag valt ett par enkla exempel, men man kan ju tänka sig att man tar med många fler element och deras attribut.

Den andra metoden innebär att man i stället beskriver hur objekten på en webbsida förhåller sig till varandra. Här har jag valt samma dokument, men använt den andra metoden, där alla objekt dokumenteras i en trädstruktur, som bilden visar.

Varje blå ruta utgörs av ett element eller objekt. I den här modellen kallas de även för nod.

Strecken mellan varje nod kallas stam.

Barn (child) kallas alla noder som ligger under en annan nod.

Förälder (parent) är på motsvarande sätt den nod som har barn: ul är förälder till li, som är förälder till b.

Noder som saknar föräldrar kallas rot och noder som saknar barn kallas terminalnoder. Sedan gäller också att:

b är en ättling till p och p är en förfader till b

title och style är syskon (siblings)

Det senare gäller även h1, p och ul. Den tekniska specifikationen till en DOM är givetvis väldigt mycket mer komplex. Där bestäms sådant som vilka samlingar av objekt som får finnas, vilka objekt som får vara barn eller föräldrar, vilka objekt som kan vara släkt, vad som kan vara ett rotobjekt, osv.

För den som är intresserad av att veta mer kan jag rekommendera ett besök på W3Cs DOM-sidor: www.w3.org/DOM.