DOM-manipulatie

Wat is het?

De DOM is de boom-structuur van je HTML in de browser. Met JS kun je elementen zoeken, aanpassen en toevoegen.

Waarom gebruiken we dit?

• Tekst of attributen aanpassen
• Lijsten vullen met data uit een API
• Gebeurtenissen (click, input) laten reageren

Elementen zoeken

// Één element (eerste match)
const titel = document.querySelector("h1")

// Meerdere elementen (NodeList)
const items = document.querySelectorAll(".item")

Tekst & HTML aanpassen

const statusEl = document.querySelector("#status")
// Alleen tekst (veilig): 
statusEl.textContent = "Laden gelukt"

// HTML invoegen (let op XSS-risico):
statusEl.innerHTML = "<strong>Welkom</strong>"

Attributen & classes

const img = document.querySelector("img")
img.setAttribute("alt", "Productfoto")
img.src = "/images/product.jpg"

const box = document.querySelector(".box")
box.classList.add("highlight")
box.classList.toggle("hidden")

Elementen maken en toevoegen

const lijst = document.querySelector("#resultaten")
const li = document.createElement("li")
li.textContent = "Nieuw item"
lijst.appendChild(li)

Events (klik, invoer)

const knop = document.querySelector("#haalOp")
knop.addEventListener("click", () => {
  console.log("Knop geklikt")
})

Mini-voorbeeld: tekst vullen met API-data

async function toonWeer() {
  const el = document.querySelector("#weer")
  el.textContent = "Bezig met weer ophalen..."
  try {
    const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=52.08&longitude=4.30&current_weather=true")
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const data = await res.json()
    const temp = data.current_weather?.temperature
    const wind = data.current_weather?.windspeed
    el.textContent = `In Den Haag is het ${temp}°C, met een windsnelheid van ${wind} km/h`
  } catch (err) {
    el.textContent = "Kon het weer niet ophalen."
    console.error(err)
  }
}
document.querySelector("#haalWeer").addEventListener("click", toonWeer)

De HTML die hierbij hoort is dan:

<p id="weer">Nog niets opgehaald.</p>
<button id="haalWeer">Haal weer op</button>

Veelgemaakte fouten

• querySelector("#id") vs querySelectorAll(...) door elkaar halen
• innerHTML gebruiken waar textContent hoort (veiligheid)
• Element selecteren vóórdat het in de DOM staat (plaats je <script> onderaan of gebruik defer)