HTMLhulp.nl logo

De DOM (Document Object Model) is de representatie van je HTML in JavaScript. Met DOM-manipulatie kun je elementen selecteren, wijzigen, toevoegen of verwijderen.

Selecteren van elementen

MethodeBeschrijvingVoorbeeld
document.getElementById()Selecteert element met IDdocument.getElementById("demo")
document.getElementsByClassName()Selecteert alle elementen met classdocument.getElementsByClassName("item")
document.getElementsByTagName()Selecteert alle elementen met tagnaamdocument.getElementsByTagName("p")
document.querySelector()Selecteert eerste element met CSS-selectordocument.querySelector(".intro")
document.querySelectorAll()Selecteert alle elementen met CSS-selectordocument.querySelectorAll("div p")

Lezen & aanpassen van inhoud

Eigenschap / MethodeBeschrijvingVoorbeeld
.innerTextTekstinhoud (zonder HTML)el.innerText = "Nieuwe tekst";
.textContentTekst (inclusief verborgen)el.textContent = "Tekst";
.innerHTMLHTML-inhoud (inclusief tags)el.innerHTML = "<strong>Vet</strong>";
.valueWaarde van input-elementdocument.getElementById("naam").value

Attributen & classes

MethodeBeschrijvingVoorbeeld
.setAttribute()Nieuw attribuut instellenel.setAttribute("src", "foto.jpg");
.getAttribute()Waarde ophalenel.getAttribute("href");
.removeAttribute()Attribuut verwijderenel.removeAttribute("class");
.classList.add()Class toevoegenel.classList.add("active");
.classList.remove()Class verwijderenel.classList.remove("active");
.classList.toggle()Class aan/uit schakelenel.classList.toggle("dark");

Stijlen aanpassen

EigenschapBeschrijvingVoorbeeld
.style.propertyInline stijl aanpassenel.style.color = "red";
Meerdere stijlenvia class toevoegenel.classList.add("highlight");

Elementen maken & toevoegen

let nieuwEl = document.createElement("p");
nieuwEl.innerText = "Dit is nieuw!";
document.body.appendChild(nieuwEl);

Andere methoden:

MethodeBeschrijvingVoorbeeld
.appendChild()Kind toevoegenparent.appendChild(child)
.prepend()Element vooraan toevoegenparent.prepend(child)
.insertBefore()Element invoegenparent.insertBefore(nieuw, bestaand)
.remove()Element verwijderenel.remove();

Events toevoegen

let knop = document.getElementById("knop");
knop.addEventListener("click", function() {
alert("Knop geklikt!");
});

Veelgebruikte events:

  • click – bij klik

  • mouseover – bij hover

  • keyup – bij toets loslaten

  • submit – bij formulier versturen

  • change – bij waarde veranderen

Traversing (navigeren door de DOM)

EigenschapBeschrijvingVoorbeeld
.parentNodeBovenliggend elementel.parentNode
.childrenAlle child-elementenel.children
.firstChildEerste childel.firstChild
.lastChildLaatste childel.lastChild
.nextElementSiblingVolgend elementel.nextElementSibling
.previousElementSiblingVorig elementel.previousElementSibling

Handige short-hands

// Selecteer en wijzig tekst in 1 regel
document.querySelector("#demo").innerText = "Hallo Wereld!";