Feb
Document Object Model - Fortsättning
Kategorier: (X)HTML CSS Javascript WebstandarderI den här delen ska jag ta upp hur innehållet i ett DOM-träd ser ut och hur de olika noderna förhåller sig till varandra. Du kommer även att få lite förståelse för hur både javascript och CSS använder DOM för att tolka webbsidan och manipulera den.
Om du inte läst den första DOM-artikeln bör du göra det innan du fortsätter.
Här är en väldigt simpel kodsnutt, en lista med länkar i:
<ul>
<li><a href="">Hem</a></li>
<li><a href="">Kontakt</a></li>
</ul>
Denna kod kommer att representeras av en logisk DOM-struktur som ser ut på föjande sätt (kom ihåg att text är en egen nodtyp och får därför en egen ruta):
Om du tar DOM-trädet från förra artikeln och vänder upp och ner på det kommer det att likna denna logiska DOM-struktur.
Om vi utgår ifrån UL-elementet, eller UL-noden som är den rätta benämningen, ser man att den befinner sig ovanför resten av innehållet. LI-noderna i detta fallet kallas för children (barn) till UL eftersom de befinner sig i första nivån under UL, som logiskt nog kallas för parent (förälder) till LI-noderna. A-noderna är i sin tur children till LI-noderna och parents till textnoderna. De två LI-noderna förhåller sig som syskon, och benämns även som siblings i DOM.
En förfader (ancestor) är en nod som finns i någon nivå ovanför en annan nod. Till exempel är UL en ancestor till både LI-noderna och de underliggande A-noderna. Samma term finns "åt andra hållet", där A-noderna är avkommor till UL-noden, så kallade descendants. Dessa termer är väldigt bra att lära sig och komma ihåg eftersom de återkommer väldigt ofta när man pratar om DOM-strukturer.
I CSS kan man använda olika väljare (selectors) för att få en viss stil att "träffa" en viss del av HTML-koden. Ett exempel är denna lilla rad:
ul>li {background-color: white}I detta fall är tecknet ">" väljaren, och den säger att de LI-element som är barn till UL-elementet ska få bakgrundsfärgen vit. Notera att den väljer endast de LI-element som är i nivån precis under det angivna UL-elementet, inte eventuella LI-element som är flera nivåer under. Mer om detta kommer i en artikel som enbart tar upp CSS-väljare. För stunden räcker det att förstå hur viktigt det är att ha kunskap om DOM för att kunna lära sig CSS och dess väljare ordentligt.
I javascript finns många olika funktioner för att röra sig i DOM-trädet och hitta olika element i strukturen. Några exempel på dessa funktioner är previousSibling, hasChildNodes, firstChild.
Eventuella förändringar som görs i DOM-strukturen med hjälp av javascript sker omedelbart och utan att sidan laddas om. Detta utnyttjas friskt inom dagens webbutveckling och är anledningen till att alla de web 2.0-applikationer som finns idag fungerar som de gör. Givetvis finns det baksidor med detta. Till exempel sparar inte webbläsare förändringar i DOM-trädet i sin historik, vilket innebär att tillbakaknappen i webbläsarna inte fungerar om man ändrat på sidans innehåll med hjälp av javascript.
Man bör vara försiktig var och hur man använder javascript och DOM på en sida. En bra grundregel är att först göra en fungerande site enbart med HTML och CSS (och givetvis något språk på serversidan), och sedan förbättra användarupplevelsen med javascript. Nu snubblar vi dock in på två andra ämnen som kommer att tas upp framöver, nämligen "unobtrusive javascript" och "graceful degradation", två termer som det pratas om väldigt mycket. De kommer dock att behandlas i en egen artikel.
TYCKTE DU OM ARTIKELN?
