Link Search Menu Expand Document (external link)
teorihandboken

JS 1.5 DOM-manipulation

Table of contents

DOM:en

DOM = Document Object Model, representerar alla HMTL objekt/element på sidan. Det går att skapa dynamisk HTML med hjälp av JavaScript, för att till exempel:

  • Ändra attribut på sidan
  • Ändra CSS
  • Lägga till och ta bort befintliga HTML-element och -attribut
  • Lägga till och reagera på event på sidan

Hämta element från HTML

För att förändra eller lyssna till förändringar hos ett HTML-element (mer om det här), så behöver vi först “hämta” det. Det finns olika sätt att göra det på, och använder du ett framework eller library så finns det ofta inbyggt funktioner för det. Nedan är exempel på hur vi kan hämta element med vanilla JavaScript.

Exempel: hämta element baserat på class eller id 

// sparar elementet med id 'red' till variabel
const myIdElement = document.getElementById('red');

// sparar alla element med klasserna 'blue' och 'green' i en array/node-list
const myClassElements = document.getElementByClassName('blue green');

Ett bättre/smidigare sätt att hämta element är genom att använda querySelector eller querySelectorAll. Då går det att hämta element efter flera olika selektorer med samma funktion (tagg, klass, id etc).

Exempel: hämta element med querySelector() 

// sparar elementet med id 'red' till variabel
const myIdElement = document.querySelector('#red');

// sparar alla element med klasserna 'blue' och 'green' i en array/node-list
const myClassElements = document.querySelector('.blue, .green');

// sparar en lista med <p>-element vars närmsta förälder är en <div> med klassen 'green' och som finns i en container vars id är 'red'
const myRedElement = document.querySelector("#red");
const myPs= myRedElement.querySelectorAll("div.green > p");

Fler exempel

Nedan listas några olika sätt att hämta och förändra (eller lyssna på) element från DOM:en med vanilla JavaScript.

Lagra i en en variabel, använd i anonym arrow function 

const buttonElement = document.querySelector('#btn');
buttonElement.addEventListener('click', () => {
    alert('hej');
})

Hämta element direkt, använd i anonym arrow function 

document.querySelector('#btn').addEventListener('click', () => {
    alert('hej');
});

Deklarera funktion, hämta element direkt, kalla på funktionen 

const doHej = () => {
    alert('hej');
}
document.querySelector('#btn').addEventListener('click', doHej);

Deklarera funktion, lagra i en variabel, kalla på funktionen 

const doHej = () => {
    alert('hej');
}
const buttonElement = document.querySelector("#btn");
buttonElement.addEventListener('click', doHej);

Klicka på knapp för att skriva text i en div med specifik class 

const doHej = () => {
    document.querySelector('.info').textContent = 'hej';
}
const buttonElement = document.querySelector('#btn');
buttonElement.addEventListener('click', doHej);