JavaScript — Introduktion genom exempel

10.1 Noder

I exemplen i detta kapitel ska vi se på hur vi kan arbeta med den struktur som byggs upp av HTML-koden. Detta blir en trädstruktur, där elementen utgör olika noder i trädet. Objekten för detta finns definerade i DOM, Document Object Model. Det finns olika metoder (funktioner) och egenskaper, för att gå runt i trädet och göra förändringar eller tillägg. Detta kommer tas upp i de kommande exemplen, men i detta exempel börjar vi med att repetera hur vi kommer åt noderna och deras innehåll.

19 min.

Sammanfattning

HTML-koden kan illustreras av ett upp och nedvänt träd, där rotelementet är HTML-elementet, som i koden omger hela HTML-koden. Ovanför det har vi objektet document, som utgör roten för hela trädet. Varje element som har inre element utgör en nod där det sker förgreningar. I trädstrukturen blir det grenar som går nedåt i trädet.

Föräldrar, barn och syskon

Ett element som i HTML-koden omger andra element kallas för en förälder (parent), medan de inre elementen är barnen (children). I trädstrukturen blir föräldern en överliggande nod och barnen de noder som ligger direkt under föräldern.

De element som ligger på samma nivå direkt under en förälder, kallas syskon (siblings)

Gå nedåt och uppåt

För att gå nedåt i trädet använder man querySelector() eller querySelectorAll() och söker sig nedåt i trädets grenar. Det går också använda egenskapen children, som är en lista med de underliggande elementen.

För att gå uppåt till föräldern, använder man egenskapen parentElement.

Gå i sidled

För att gå till närmast föregående eller efterföljande syskon, använder man egenskaperna previousElementSibling respektive nextElementSibling. Då kommer man alltså till närmaste element som har samma förälder som det element man utgår ifrån. Finns det inget föregående eller efterföljande syskon, blir resultatet null.

Innehåll i noderna

För att komma åt nodens (dvs elementets) innehåll, kan man använda flera olika egenskaper. Med innerHTML får man all HTML-kod i elementet, inklusive eventuella underliggande element. Med innerText får man allt textinnehåll i elementet och dess underliggande element. Ett alternativ till innerText är att använda egenskapen textContent.

Ett element som innehåller text, har en underliggande textnod. Denna kan man referera till med egenskapen firstChild, som är första noden direkt under elementets nod. Men för att också gå in i textnoden och komma åt innehållet, får man lägga till ytterligare en egenskap som kan vara data, value eller text (det finns alltså flera olika alternativ för samma sak). Man kan alltså t.ex. skriva elem.firstChild.data, men enklare är ju att använda elem.innerText eller elem.textContent.

Egna övningar

I test.html finns en lista med frukter och en med grönsaker. Lägg in kod i test.js, så att följande görs: