Hoofdstuk 7: DOM Manipulatie

Wat is de DOM?

De DOM (Document Object Model) is de structuur van je HTML-pagina. Met JavaScript kun je elementen in de DOM selecteren en aanpassen. Hiermee kun je:

Tekst veranderen
Stijlen aanpassen
Elementen toevoegen of verwijderen
En nog veel meer!

Om een element te selecteren gebruik je document.querySelector(). Deze functie zoekt naar een element met behulp van een CSS selector.

let element = document.querySelector("p");  // Selecteert de eerste <p>
let element2 = document.querySelector("#myId");  // Selecteert element met id="myId"
let element3 = document.querySelector(".myClass");  // Selecteert eerste element met class="myClass"

querySelector werkt net als CSS selectors: gebruik # voor een id, . voor een class, en gewoon de tag naam voor HTML elementen.

Elementen selecteren

Laten we beginnen met het selecteren van elementen op de pagina.

Oefening 1

Selecteer het element met id title en sla het op in een variabele element.

Jouw code:

// Schrijf hier je code

Oefening 2

Selecteer de eerste <p> tag en sla het op in een variabele paragraph.

Jouw code:

// Schrijf hier je code

Oefening 3

Selecteer het element met class header en sla het op in een variabele headerElement.

Jouw code:

// Schrijf hier je code

Oefening 4

Selecteer het element met id main-content en sla het op in een variabele mainContent.

Jouw code:

// Schrijf hier je code

Oefening 5

Selecteer de eerste <button> en sla het op in een variabele btn.

Jouw code:

// Schrijf hier je code

Oefening 6

Selecteer het element met class active en sla het op in een variabele activeElement.

Jouw code:

// Schrijf hier je code

Oefening 7

Selecteer de eerste <div> en sla het op in een variabele container.

Jouw code:

// Schrijf hier je code

Oefening 8

Selecteer het element met id app en sla het op in een variabele app.

Jouw code:

// Schrijf hier je code

Oefening 9

Selecteer de eerste <h1> en sla het op in een variabele heading.

Jouw code:

// Schrijf hier je code

Oefening 10

Selecteer het element met class menu-item en sla het op in een variabele menuItem.

Jouw code:

// Schrijf hier je code

Tekst lezen en aanpassen

Elk DOM element heeft een textContent property. Hiermee kun je de tekst van een element lezen of veranderen.

let element = document.querySelector("#title");
console.log(element.textContent);  // Leest de tekst
element.textContent = "Nieuwe tekst";  // Verandert de tekst

Oefening 1

Selecteer het element met id heading. Verander de textContent naar "Welkom!".

Jouw code:

// Schrijf hier je code

Oefening 2

Selecteer de eerste <p> tag. Sla de textContent op in een variabele tekst.

Jouw code:

// Schrijf hier je code

Oefening 3

Selecteer het element met id message. Verander de tekst naar "Hallo wereld!".

Jouw code:

// Schrijf hier je code

Oefening 4

Selecteer het element met class info. Verander de tekst naar "Dit is informatie".

Jouw code:

// Schrijf hier je code

Oefening 5

Selecteer de eerste <button>. Verander de tekst naar "Klik hier".

Jouw code:

// Schrijf hier je code

Oefening 6

Selecteer het element met id counter. Verander de tekst naar het getal 0.

Jouw code:

// Schrijf hier je code

Oefening 7

Selecteer het element met id name. Lees de textContent en sla het op in een variabele userName. Log userName.

Jouw code:

// Schrijf hier je code

Oefening 8

Selecteer de eerste <h2>. Verander de tekst naar "Hoofdstuk 1".

Jouw code:

// Schrijf hier je code

Oefening 9

Selecteer het element met class status. Verander de tekst naar "Actief".

Jouw code:

// Schrijf hier je code

Oefening 10

Selecteer het element met id price. Verander de tekst naar "€19.99".

Jouw code:

// Schrijf hier je code

Stijlen aanpassen

Je kunt CSS stijlen aanpassen via de style property. Elke CSS property kun je benaderen, maar met camelCase in plaats van kebab-case.

let element = document.querySelector("#box");
element.style.color = "red";  // CSS: color: red;
element.style.backgroundColor = "blue";  // CSS: background-color: blue;
element.style.fontSize = "20px";  // CSS: font-size: 20px;

CSS properties met een streepje (zoals background-color) worden in JavaScript camelCase: backgroundColor. Let op dat waarden altijd strings zijn met eenheden: "20px", niet 20.

Oefening 1

Selecteer het element met id box. Verander de color style naar "red".

Jouw code:

// Schrijf hier je code

Oefening 2

Selecteer de eerste <p>. Verander de fontSize naar "20px".

Jouw code:

// Schrijf hier je code

Oefening 3

Selecteer het element met class highlight. Verander de backgroundColor naar "yellow".

Jouw code:

// Schrijf hier je code

Oefening 4

Selecteer het element met id banner. Verander de color naar "white" en de backgroundColor naar "black".

Jouw code:

// Schrijf hier je code

Oefening 5

Selecteer de eerste <h1>. Verander de textAlign naar "center".

Jouw code:

// Schrijf hier je code

Oefening 6

Selecteer het element met id container. Verander de width naar "500px".

Jouw code:

// Schrijf hier je code

Oefening 7

Selecteer het element met class button. Verander de padding naar "10px" en de borderRadius naar "5px".

Jouw code:

// Schrijf hier je code

Oefening 8

Selecteer het element met id image. Verander de display naar "none".

Jouw code:

// Schrijf hier je code

Oefening 9

Selecteer de eerste <div>. Verander de margin naar "20px".

Jouw code:

// Schrijf hier je code

Oefening 10

Selecteer het element met class card. Verander de border naar "1px solid black", de padding naar "15px", en de backgroundColor naar "#f0f0f0".

Jouw code:

// Schrijf hier je code

Attributes lezen en aanpassen

Elementen hebben attributes zoals src, href, id, class, etc. Je kunt deze lezen en aanpassen.

let link = document.querySelector("a");
console.log(link.href);  // Leest de href attribute
link.href = "https://example.com";  // Verandert de href

let img = document.querySelector("img");
img.src = "photo.jpg";  // Verandert de src
img.alt = "Een foto";  // Verandert de alt tekst

Oefening 1

Selecteer het element met id link. Verander de href attribute naar "https://google.com".

Jouw code:

// Schrijf hier je code

Oefening 2

Selecteer de eerste <img>. Verander de src naar "logo.png".

Jouw code:

// Schrijf hier je code

Oefening 3

Selecteer het element met id photo. Verander de alt attribute naar "Landschap foto".

Jouw code:

// Schrijf hier je code

Oefencing 4

Selecteer de eerste <a> tag. Lees de href en sla het op in een variabele url.

Jouw code:

// Schrijf hier je code

Oefening 5

Selecteer het element met class profile-pic. Verander de src naar "avatar.jpg" en de alt naar "Profiel foto".

Jouw code:

// Schrijf hier je code

Oefening 6

Selecteer het element met id website. Verander de href naar "https://wikipedia.org" en de textContent naar "Bezoek Wikipedia".

Jouw code:

// Schrijf hier je code

Oefening 7

Selecteer de eerste <input>. Verander de value naar "Typ hier...".

Jouw code:

// Schrijf hier je code

Oefening 8

Selecteer het element met id banner-img. Verander de src naar "banner.jpg".

Jouw code:

// Schrijf hier je code

Oefening 9

Selecteer de eerste <a>. Verander de href naar "https://github.com" en de target naar "_blank".

Jouw code:

// Schrijf hier je code

Oefening 10

Selecteer het element met class thumbnail. Lees de src en sla het op in een variabele imageSrc. Log imageSrc.

Jouw code:

// Schrijf hier je code

Classes toevoegen en verwijderen

Je kunt CSS classes toevoegen of verwijderen met classList.add() en classList.remove().

let element = document.querySelector("#box");
element.classList.add("active");  // Voegt class "active" toe
element.classList.remove("hidden");  // Verwijdert class "hidden"
element.classList.toggle("visible");  // Toggle: voeg toe als niet aanwezig, verwijder als wel aanwezig

Oefening 1

Selecteer het element met id menu. Voeg de class "open" toe met classList.add().

Jouw code:

// Schrijf hier je code

Oefening 2

Selecteer de eerste <div>. Verwijder de class "hidden" met classList.remove().

Jouw code:

// Schrijf hier je code

Oefening 3

Selecteer het element met id sidebar. Voeg de class "collapsed" toe.

Jouw code:

// Schrijf hier je code

Oefening 4

Selecteer het element met class button. Voeg de class "active" toe en verwijder de class "disabled".

Jouw code:

// Schrijf hier je code

Oefening 5

Selecteer het element met id modal. Toggle de class "visible" met classList.toggle().

Jouw code:

// Schrijf hier je code

Oefening 6

Selecteer de eerste <p>. Voeg de class "highlight" toe.

Jouw code:

// Schrijf hier je code

Oefening 7

Selecteer het element met class card. Verwijder de class "inactive".

Jouw code:

// Schrijf hier je code

Oefening 8

Selecteer het element met id notification. Voeg de classes "show" en "fade-in" toe (twee aparte add aanroepen).

Jouw code:

// Schrijf hier je code

Oefening 9

Selecteer het element met class dropdown. Toggle de class "expanded".

Jouw code:

// Schrijf hier je code

Oefening 10

Selecteer het element met id theme-toggle. Toggle de class "dark-mode".

Jouw code:

// Schrijf hier je code

Nieuwe elementen maken

Je kunt nieuwe HTML elementen maken met document.createElement() en ze toevoegen aan de pagina met appendChild().

let newDiv = document.createElement("div");  // Maak een nieuwe <div>
newDiv.textContent = "Ik ben nieuw!";  // Geef het text
newDiv.classList.add("new");  // Voeg een class toe

let container = document.querySelector("#container");
container.appendChild(newDiv);  // Voeg de nieuwe div toe aan container

Oefening 1

Maak een nieuwe <p> met createElement. Sla het op in een variabele newParagraph. Verander de textContent naar "Nieuwe paragraaf".

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een nieuwe <div>. Verander de textContent naar "Hallo". Selecteer het element met id container en voeg de nieuwe div toe met appendChild().

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een nieuwe <button>. Verander de textContent naar "Klik". Voeg de class "btn" toe.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een nieuwe <h2>. Verander de textContent naar "Titel". Selecteer het element met id header en voeg de nieuwe h2 toe.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een nieuwe <img>. Verander de src naar "photo.jpg" en de alt naar "Foto".

Jouw code:

// Schrijf hier je code

Oefening 6

Maak een nieuwe <li> met textContent "Item 1". Selecteer het element met id list en voeg de nieuwe li toe.

Jouw code:

// Schrijf hier je code

Oefening 7

Maak een nieuwe <a>. Verander de href naar "https://example.com" en de textContent naar "Klik hier". Selecteer het element met class nav en voeg de link toe.

Jouw code:

// Schrijf hier je code

Oefening 8

Maak een nieuwe <div> met class "box" en textContent "Box 1". Verander de backgroundColor style naar "lightblue".

Jouw code:

// Schrijf hier je code

Oefening 9

Maak een nieuwe <span> met textContent "Nieuw" en class "badge". Selecteer het element met id title en voeg de span toe.

Jouw code:

// Schrijf hier je code

Oefening 10

Maak een for loop die van 1 tot 5 telt. In de loop, maak een nieuwe <p> met textContent "Paragraaf " + i. Selecteer het element met id content en voeg elke p toe.

Jouw code:

// Schrijf hier je code

Complexere oefeningen

Nu combineren we alles: elementen selecteren, aanpassen, classes toevoegen, en nieuwe elementen maken.

Oefening 1

Maak een functie changeColor(id, color) die een element selecteert op basis van id en de backgroundColor verandert. Roep de functie aan met "box" en "red".

Jouw code:

// Schrijf hier je code

Oefening 2

Maak een functie toggleClass(selector, className) die een element selecteert en de class togglet. Test met ".menu" en "open".

Jouw code:

// Schrijf hier je code

Oefening 3

Maak een functie createListItem(text) die een nieuwe <li> maakt, de textContent instelt, en het element teruggeeft. Roep de functie aan met "Item 1", sla op in item. Selecteer #list en voeg item toe.

Jouw code:

// Schrijf hier je code

Oefening 4

Maak een array colors met ["red", "blue", "green"]. Loop door de array. Voor elke color, maak een nieuwe <div>, verander de backgroundColor naar die color en de width/height naar "50px". Selecteer #container en voeg elke div toe.

Jouw code:

// Schrijf hier je code

Oefening 5

Maak een functie hideElement(selector) die een element selecteert en de display style naar "none" zet. Maak een functie showElement(selector) die display naar "block" zet. Test beide met "#popup".

Jouw code:

// Schrijf hier je code

Oefening 6

Maak een functie updateCounter(id, value) die een element selecteert en de textContent instelt op de value. Maak een variabele count met waarde 0. Roep updateCounter("#counter", count) aan. Verhoog count met 1 en roep weer aan. Doe dit nog twee keer.

Jouw code:

// Schrijf hier je code

Oefening 7

Maak een functie createCard(title, description) die een nieuwe <div> met class "card" maakt, een <h3> met de title en een <p> met de description maakt, beide toevoegt aan de card, en de card teruggeeft. Maak een card met title "Product" en description "Dit is een product". Selecteer #products en voeg de card toe.

Jouw code:

// Schrijf hier je code

Oefening 8

Maak een array items met ["Appel", "Banaan", "Sinaasappel"]. Loop door de array. Voor elk item, maak een <li> met de textContent van het item en class "fruit". Als de index even is (gebruik i % 2 === 0), voeg de class "highlight" toe. Selecteer #fruit-list en voeg elke li toe.

Jouw code:

// Schrijf hier je code

Oefening 9

Maak een functie setAttributes(selector, attrs) waarbij attrs een object is met attribute namen en waarden. Loop door de keys van het object (met een for loop of gewoon hardcoded) en stel elke attribute in. Test met "#link" en een object {href: "https://google.com", target: "_blank", textContent: "Google"}.

Jouw code:

// Schrijf hier je code

Oefening 10

Maak een functie buildTable(rows, cols) die een <table> maakt met het aantal rijen en kolommen. Elke cel (td) krijgt de textContent "R" + row + "C" + col (bijv. "R1C1"). De functie geeft de table terug. Maak een table met 3 rijen en 4 kolommen. Selecteer #table-container en voeg de table toe.

Jouw code:

// Schrijf hier je code