Hoe gebruik je een selector in CSS of JavaScript?

In CSS geven selectors aan op welke HTML-elementen stijlen moeten worden toegepast. In JavaScript worden ze gebruikt om DOM-elementen te selecteren.

Belangrijkste typen CSS-selectors:

• Type-selector: Selecteert alle elementen van een bepaald type.

  div {
    /* stijlen voor alle <div> */
  }
  

• Klasse-selector: Selecteert elementen met een specifieke klasse.

  .mijn-klasse {
    /* stijlen voor elementen met klasse "mijn-klasse" */
  }
  

• ID-selector: Selecteert het element met een specifieke ID (moet uniek zijn).

  #mijn-id {
    /* stijlen voor het element met ID "mijn-id" */
  }
  

• Universele selector: Selecteert alle elementen.

  * {
    /* stijlen voor alle elementen */
  }
  

• Combinatoren: combineren selectors.
  • Descendant ( ): div p - selecteert alle <p> binnen <div>.
  • Direct kind (>): div > p - selecteert alle <p> die directe kinderen zijn van <div>.
  • Aangrenzend broertje (+): h2 + p - selecteert de eerste <p> die direct volgt op <h2>.
  • Algemene broer (~): h2 ~ p - selecteert alle <p> die volgen op <h2>.

In JavaScript worden de methoden querySelector en querySelectorAll gebruikt om DOM-elementen te selecteren.

• querySelector: Geeft het eerste element dat overeenkomt met de opgegeven CSS-selector.

  // Selecteert het eerste element met klasse "mijn-klasse"
  const element = document.querySelector('.mijn-klasse');
  

• querySelectorAll: Geeft een NodeList (vergelijkbaar met een array) van alle elementen die overeenkomen met de CSS-selector.

  // Selecteert alle `<div>`-elementen
  const elementen = document.querySelectorAll('div');
  

Voorbeeld in JavaScript:

// Vind een knop op ID
const mijnKnop = document.querySelector('#mijn-knop');

// Voeg een klikgebeurtenis toe
if (mijnKnop) {
  mijnKnop.addEventListener('click', () => {
    alert('Knop ingedrukt!');
  });
}

// Vind alle lijstitems met klasse "lijst-item"
const lijstItems = document.querySelectorAll('.lijst-item');

// Wijzig de tekst van elk lijstitem
lijstItems.forEach(item => {
  item.textContent = 'Bijgewerkte tekst';
});

De relatie tussen CSS-selectors en het gebruik ervan in JavaScript met querySelector/querySelectorAll is direct. Je kunt dezelfde CSS-selectors gebruiken die je in stijlen gebruikt om elementen in JavaScript te selecteren.