JavaScript DOM manipulatie samenvatting

Wat is de DOM?

De Document Object Model (DOM) is een programmeermodel dat HTML- en XML-documenten als objecten weergeeft. Hiermee kunnen ontwikkelaars de structuur en inhoud van webpagina's manipuleren.

Noem een basis DOM-methode.

Een veelgebruikte methode is `getElementById()`, waarmee je een element met een specifieke id kunt selecteren.

Wat doet `querySelector()`?

`querySelector()` selecteert het eerste element dat overeenkomt met een CSS-selector. Voorbeeld: `document.querySelector('.klas')`.

True of false: `innerHTML` verandert de tekst van een element.

False. `innerHTML` verandert de HTML-inhoud van een element, niet alleen de tekst.

Vul de lege plek in: `document.getElementsByClassName('___')`.

Je kunt hier de naam van een CSS-klasse invullen om elementen te selecteren. Bijvoorbeeld: 'mijnKlasse'.

Wat is het verschil tussen `appendChild()` en `insertBefore()`?

`appendChild()` voegt een element toe aan het einde van een ouder, terwijl `insertBefore()` een element toevoegt vóór een specifiek bestaand element.

Geef een voorbeeld van het gebruik van `setAttribute()`.

`element.setAttribute('src', 'afbeelding.jpg')` stelt de bron van een afbeelding in op 'afbeelding.jpg'.

Wat doet `removeChild()`?

`removeChild()` verwijdert een specifiek kindelement uit de DOM van een ouderelement. Bijvoorbeeld: `ouder.removeChild(kind)`.

Noem twee methoden voor het selecteren van elementen.

`getElementById()` en `querySelector()`. Beide worden veel gebruikt in DOM-manipulatie.

Geef een korte uitleg van `textContent`.

`textContent` haalt of stelt de tekstinhoud van een element in zonder HTML-tags. Voorbeeld: `element.textContent = 'Hallo';`.

Wat is het nut van DOM-manipulatie?

Met DOM-manipulatie kun je interactieve en dynamische webpagina's creëren door elementen te bewerken, toevoegen of verwijderen.

Voorbeeld van een DOM-selectie met `querySelectorAll()`.

`document.querySelectorAll('.item')` selecteert alle elementen met de klasse 'item'. Dit retourneert een NodeList.

Wat is event handling in JavaScript?

Event handling is het proces van reageren op gebeurtenissen in de browser, zoals klikken of toetsenbordinvoer.

Vul de lege ruimte in: 'Een _____ is een object dat een gebeurtenis representeert.'

Event

Noem twee methodes voor het toevoegen van event listeners.

- addEventListener() - onclick

Waarvoor dient event delegation?

Event delegation maakt het mogelijk om één event listener op een ouder element te plaatsen. Dit verlaagt het aantal event listeners en verbetert de prestaties.

Wat doet de preventDefault() methode?

preventDefault() voorkomt de standaardactie van een gebeurtenis, bijvoorbeeld het voorkomen van het verzenden van een formulier.

True of False: Dynamische elementen kunnen alleen met innerHTML worden toegevoegd.

False. Dynamische elementen kunnen ook met methods zoals createElement() en appendChild() worden toegevoegd.

Vergelijk appendChild() en innerHTML.

appendChild() voegt een element toe als een kind, terwijl innerHTML de gehele inhoud vervangt. Het gebruik van appendChild() is vaak veiliger.

Hoe verbeter je de DOM-prestaties?

Gebruik technieken zoals documentFragment of batch updates om her-rendering te minimaliseren.

Wat is het effect van het gebruik van requestAnimationFrame()?

requestAnimationFrame() optimaliseert animaties door de rendering te synchroniseren met de verversingssnelheid van de browser.

Noem een voordeel van dynamisch elementen manipuleren.

Dynamische elementen kunnen eenvoudig worden toegevoegd of verwijderd zonder de pagina te herladen, wat de gebruikerservaring verbetert.

Wat is de rol van event.stopPropagation()?

stopPropagation() voorkomt dat een gebeurtenis zich verder verspreidt naar ouders in de DOM, waardoor alleen de doel-elementhandler wordt uitgevoerd.

Geef een voorbeeld van een 'click' event.

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