Hoe vind je alle verborgen elementen op de pagina?

CSS-selectors kunnen in combinatie met JavaScript worden gebruikt.

Belangrijkste benaderingen:

• ** :not(:visible) pseudo-klasse (niet standaard)**: Hoewel CSS standaard geen directe selector voor "onzichtbaar" heeft, bieden sommige frameworks en bibliotheken (bijvoorbeeld jQuery) hun eigen implementaties of kan je een aangepaste logica maken. Deze aanpak is meer conceptueel voor uitleg.
• Controle van display, visibility en opacity: Dit is de meest betrouwbare methode in native JS. Verborgen elementen worden beschouwd als zij met display: none, visibility: hidden of opacity: 0 (als ze geen zichtbare ouder-elementen hebben).

// Alle elementen op de pagina ophalen
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

allElements.forEach(element => {
  const computedStyle = getComputedStyle(element);

  // Controle van display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Het element is verborgen, verdere controle is niet nodig
  }

  // Controle van visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Controle van opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Complexe voorwaarde voor opacity: controleer of het element zelf onzichtbaar is door opacity: 0
    // en of het geen zichtbare kinderen heeft (met opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Extra controle op verbergen door ouder (complexer scenario)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Het element is verborgen door de ouder
    }
    parent = parent.parentElement;
  }
});

console.log('Verborgen elementen:', hiddenElements);

• jQuery: jQuery vereenvoudigt deze taak met zijn pseudo-klasse :hidden.

// Gebruik jQuery om verborgen elementen te vinden
const hiddenElementsJquery = $(':hidden');

console.log('Verborgen elementen (jQuery):', hiddenElementsJquery);

Belangrijk: Bij gebruik van native JavaScript vereist het controleren van opacity: 0 een zorgvuldige analyse, zodat niet de ouders worden opgenomen die slechts één kind met opacity: 0 hebben, maar de ouder en andere kinderen zichtbaar zijn. Ook moet worden rekening gehouden met dat een element verborgen kan zijn door grootte (width/height 0) of buiten het viewport te liggen, maar dit is geen directe CSS-eigenschap "verborgenheid".