Inleiding tot het opvragen van de DOM

Het opvragen van de DOM houdt in dat specifieke elementen in het document worden geselecteerd en benaderd, zodat deze gemanipuleerd of ermee geïnteracteerd kan worden. JavaScript biedt verschillende methoden om elementen op te vragen, elk met een eigen toepassingsgebied en gedrag.

GetElementById

getElementById wordt gebruikt om een enkel element te selecteren op basis van zijn unieke ID. Het is een van de meest gebruikte methoden omdat ID's uniek moeten zijn binnen het document.
Toepassing: Het meest geschikt voor het selecteren van een specifiek element wanneer de ID bekend is.
Geeft terug: Een enkel element of null als er geen element wordt gevonden.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName selecteert elementen op basis van hun classnaam en retourneert een live HTMLCollection van elementen.
Toepassing: Handig wanneer meerdere elementen met dezelfde class geselecteerd moeten worden.
Geeft terug: Een live HTMLCollection van overeenkomende elementen, die wordt bijgewerkt als de DOM verandert.
Beperkingen: Array-methoden kunnen niet direct worden gebruikt; indien nodig moet er worden geconverteerd naar een array.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName selecteert elementen op hun tagnaam (bijv. div, p) en retourneert een live HTMLCollection.
Toepassing: Geschikt voor het selecteren van alle elementen van een bepaald type.
Retourneert: Een live HTMLCollection van elementen.
Beperkingen: Niet specifiek, omdat het alle elementen van een gegeven tag binnen de context selecteert.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector selecteert het eerste element dat overeenkomt met een CSS-selector. Het is veelzijdig, waardoor elke geldige CSS-selector gebruikt kan worden om elementen te vinden.
Toepassing: Ideaal voor het selecteren van de eerste overeenkomst met een CSS-selector.
Retourneert: Het eerste overeenkomende element of null als er geen overeenkomst is.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll selecteert alle elementen die overeenkomen met een CSS-selector en retourneert een statische NodeList. In tegenstelling tot andere methoden wordt deze lijst niet dynamisch bijgewerkt als de DOM verandert.
Toepassing: Perfect voor het selecteren van meerdere elementen met complexe selectors.
Retourneert: Een statische NodeList van elementen die niet automatisch wordt bijgewerkt.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Verschillen tussen deze methoden

Retourtypen

Live versus statische collecties

CSS-selectors

Prestaties

Praktisch voorbeeld: Formulier validatie

Deze methoden combineren in een praktische situatie: het markeren van ongeldige formulier-velden met behulp van klassen.

De methode getElementById selecteert het formulierelement, terwijl querySelectorAll alle invoervelden met de klasse .input-field ophaalt. Een event listener op het "submit"-evenement van het formulier voorkomt de standaardverzending en controleert elk invoerveld. Als een veld leeg is, wordt het gemarkeerd met een rode rand; ingevulde velden krijgen een groene rand, wat directe visuele feedback aan de gebruiker geeft.