Begrip: HTML-elementen vinden

JavaScript voorziet verschillende methodes om elementen op te halen uit de DOM. Bijna al van deze methodes geven een live referentie naar één of meerdere HTML-elementen terug, dit betekent dat de returnwaarde altijd gesynchroniseerd is met de DOM. De enigste uitzondering hierop is de querySelectorAll methode. Als iets gewijzigd wordt in de browser (door een actie van de gebruiker) wordt de returnwaarde ook bijgewerkt, en omgekeerd wordt elke wijziging die via JavaScript gedaan wordt, ook onmiddelijk zichtbaar op de browser.

We onderscheiden binnen deze methodes drie verschillende returntypes.

Methodes die één Element teruggeven

Een Element stelt exact één tag in de DOM voor, één paragraaf, één afbeelding, één div, ...

• getElementById: Deze methode krijgt één parameter, het id van het op te halen element.

  const someElement = document.getElementById('someId')
  someElement.style.color = '#FFF'

• querySelector: Deze methode krijg een CSS-selector als argument en geeft het eerste overeenkomstige element terug.

  const someElement = document.querySelector('#someId')
  someElement.style.color = '#FFF'

Methodes die een HTMLCollection teruggeven

Een HTMLCollection is een verzameling van één of meerdere Element items. Op deze verzameling zijn de array-methodes zoals forEach, map, filter, ... niet beschikbaar. Om over de collectie te itereren moet de collectie omgevormd worden naar een array, of moet een klassieke lus gebruikt worden.

• getElementByClassName: Deze methode krijgt één parameter, de (CSS) klasse van de elementen die opgehaald moeten worden. Aangezien een klasse per definitie aan meerdere elementen toegekend kan worden, geeft deze methode altijd een collectie terug.

  const elementsWithWhiteText = document.getElementsByClassName('white-text')
  
  // Optie één: converteer naar een array.
  Array.from(elementsWithWhiteText).forEach(elem => elem.style.color = '#FFF')
  
  // Optie twee: klassiek lus
  for (const elem of elementsWithWhiteText) {
    elem.style.color = '#FFF'
  }

• getElementsByTagName: Deze methode heeft één parameter, de naam van het HTML-tag dat opgehaald moet worden. Aangezien eenzelfde tag per definitie meerdere keren kan voorkomen in een HTML-document, geeft deze methode altijd een verzameling terug.

  const paragraphs = document.getElementsByTagName('p')
  
  // Optie één: converteer naar een array.
  Array.from(paragraphs).forEach(elem => elem.style.borderLeft = '1px solid black')
  
  // Optie twee: klassiek lus
  for (const elem of paragraphs) {
    elem.style.borderLeft = '1px solid black'
  }

Methodes die een NodeList teruggeven

Een NodeList is een verzameling van één of meer Element items, maar in tegenstelling tot een HTMLCollection, is de forEach methode hier wel beschikbaar (andere methodes blijven onbruikbaar).

• getElementsByName: Deze methode krijgt één parameter, de waarde van het name attribuut van een formulier element. Aangezien meerdere formulier elementen hetzelfde name attribuut kunnen hebben (checkboxes, radio button, ...) geeft deze methode altijd een verzameling van elementen terug.

  const selectedNewslettersElements = document.getElementsByName('newsletter')
  const selectedNewsletters = []
  selectedNewslettersElements.forEach(elem => elem.checked && selectedNewsletters.push(elem.value))

• querySelectorAll: Deze methode heeft één parameter, een CSS-selector en geeft alle elementen terug die overeen komen met de opgegeven selector.

  const quotes = document.getElementsByTagName('p.quote')
  
  for (const elem of paragraphs) {
    elem.style.borderLeft = '3px solid black'
    elem.style.paddingLeft = '1em'
    elem.style.marginLeft = '1em'
  }