DOM

Ett exempel

Ok, vi har nu lärt oss lite om hur DOM ser ut och hur vi kommer åt dess olika noder. Men vad ska vi göra och hur? Vi gör en liten sak här direkt på sidan för att visa hur användaren själv kan ges möjlighet att ändra utseendet på sidan. Genom att klicka på olika saker ska det gå att minimera, maximera och ta bort ett avsnitt. Direkt till exemplet!

Genom att klicka på den här paragrafen tar man bort den! Den blir helt borttagen från strukturen och finns inte med på sidan längre. För muspekaren över paragrafen så ser du att muspekaren ändrar skepnad. Klicka på paragrafen för att få den att försvinna.

Det som hände var att vi ändrade strukturen i DOM. Genom att textparagrafen var id-märkt kunde vi lätt få tag i den och ta bort den från dokumentet. När du laddar om sidan laddas den in igen eftersom hela dokumentet laddas om från början.

Dölj paragrafen

Den här paragrafen kan gömmas och tas fram igen. Det är inte DOM-strukturen som ändras, utan bara själva presentationen av den. Prova att klicka på "knappen" ovan och se vad som händer!

Titta gärna på koden som ligger bakom den här sidan om du vill se hur det ser ut. Det här gör du enklast genom att högerklicka med musen och välja "Visa källa/Show Source". Det fungerar lite olika i olika webbläsare men det går i de flesta. Det går också att välja (IE) Arkiv och "Spara som" för att spara filen på den egna datorn. Sen går det att öppna den i sin egen texteditor och titta på koden.

Det här var alltså ett exempel på vad som går att göra. Vi tog alltså fram ett visst element och tog bort eller gömde det för användaren. Det går även att byta plats på element, ändra på dess utseende, lägg till saker till dem osv. I stort sett, det går att göra precis vad man vill med ett element, bara man håller sig till reglerna för den HTML-standard som man säger sig följa.

Egentligen har vi ramlat in lite på ett senare avsnitt i kursen. När vi pratar om att manipulera DOM för att uppnå en annan struktur eller utseende på sidan handlar det om tekniken DHTML. Om det känns krångligt kan du försöka tänka på DOM som ett material vi arbetar med och DHTML som de tekniker vi förfinar och förändrar materialet med.