Hämta element

Man kan nå de element som webbläsaren har byggt upp utifrån koden via det så kallade “HTML DOM API:et”. Det är i objektet document vi kan hitta de metoder vi behöver. Vi får tillgång till en uppsättning metoder som förenklar processen och nedan följer några av de vanligaste sätten.

Om du vill koda med kan du hämta sandboxen.

id

Vi vet att man kan sätta ett id på html-elementen, till exempel <div id="content">. Ett id får bara tillhöra ett element och ska vara unikt för sidan. Det gör att vi enbart hämtar just det elementet.

sandbox, html

<div id="content" class="content">
</div>

Från js-filen kan vi då nå det elementet via dess id:

js, getElementById()

const myContent = document.getElementById('content')

myContent.innerHTML = '<h3>This is a template!</h3>'

Läs mer om getElementById.

queryselector

Ett annat sätt att hämta enstaka element är via document.queryselector(selector) där selector kan vara vilken css-selector som helst. Vi kommer alltid få tillbaka det första elementet som matchar eller null om inget hittas. Vi utgår från följande html kod:

sandbox, html

<div id="content" class="content">
</div>

Med tanke på att querySelector inte vet hur vi vill hämta ett element behöver vi definiera det i anropet.

js, querySelector()

const myContentById = document.querySelector('#content')
const myContentByClassName = document.querySelector('.myClass')

Värt att notera är att även om vi får ha oändligt många element med samma klassnamn är det det första som hittas som kommer returneras.

Läs mer om querySelector.

className

Om vi hämtar element via klassnamn får vi alla element som har det efterfrågade klassnamnet. Funktionen returnerar en live HTMLCollection. Det betyder att den representerar elementen i realtid och om vi ändrar på elementen kommer vi även ändra de hämtade objekten. Ofta spelar det ingen roll, men det är bra att känna till när vi itererar igenom elementen. En HTMLCollection har egenskapen length så vi kan loopa igenom den och nå alla element. Vi utgår ifrån följande html där vi har två element med samma klassnamn:

sandbox, html

<div id="content" class="content">
  Lite innehåll i första div:en
</div>
<div class="content">
  Lite innehåll i andra div:en
</div>

Vi hämtar dem via klassnamnet och når dem via dess index på följande sätt:

js, getElementsByClassName()

const allDivs = document.getElementsByClassName('myClass')
console.log(allDivs[0].innerHTML) // Lite innehåll i första div:en
console.log(allDivs[1].innerHTML) // Lite innehåll i andra div:en

Då vi alltid får tillbaka en HTMLCollection, även om det bara finns ett element, behöver vi använda index för att nå det. Det är vanligt att man använder till exempel en for-loop för att iterera igenom vår HTMLCollection.

Läs mer om getElementsByClassName.

querySelectorAll

Som ett alternativ till att hämta element med klassnamn kan vi använda och querySelectorAll(). Där returneras en statisk nodelista där alla element med den valda css selectorn finns. Om vi tar ovan exempel igen men hämtar med querySelectorAll istället behöver vi bara ändra raden som hämtar elementen: let allDivs = document.querySelectorAll('.myClass').`

Läs mer om querySelectorAll.

tagName

En annan variant som också returnerar en live HTMLCollection är document.getElementsByTagName. Det fungerar likt getElementsByClassName fast vi når elementen via dess taggnamn istället:

js, getElementsByTagName()

const allDivs = document.getElementsByTagName('div')
console.log(allDivs[0].innerHTML) // Lite innehåll i första div:en
console.log(allDivs[1].innerHTML) // Lite innehåll i andra div:en

Läs mer om getElementsByTagName.