Cum se pot găsi toate elementele ascunse de pe…

Se pot folosi selectori CSS în combinație cu JavaScript.

Abordări principale:

Pseudo-clasa :not(:visible) (neoficială): Deși CSS standard nu are un selector direct pentru "invizibil", unele framework-uri și biblioteci (de exemplu, jQuery) oferă propriile implementări sau se poate crea o logică personalizată. Această abordare este mai conceptuală pentru explicație.
Verificarea display, visibility și opacity: Este cea mai fiabilă metodă în JS nativ. Elementele ascunse sunt cele cu display: none, visibility: hidden sau opacity: 0 (dacă nu sunt părinți ai unor elemente vizibile).

// Obținem toate elementele de pe pagină
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Verificare display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Elementul este ascuns, nu are sens să verificăm visibility și opacity
  }

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

  // Verificare opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Condiție complexă pentru opacity: verificăm dacă elementul însuși este invizibil din cauza opacity: 0
    // și dacă nu are descendenți vizibili (cu opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Verificare suplimentară pentru ascundere de către părinte (scenariu mai complex)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Elementul este ascuns de părinte
    }
    parent = parent.parentElement;
  }
});

console.log('Elemente ascunse:', hiddenElements);

jQuery: jQuery simplifică această sarcină cu pseudo-clasa sa :hidden.

// Folosind jQuery pentru a găsi elemente ascunse
const hiddenElementsJquery = $(':hidden');

console.log('Elemente ascunse (jQuery):', hiddenElementsJquery);

Important: Când se folosește JavaScript nativ, verificarea opacity: 0 necesită o analiză atentă pentru a nu include în listă părinți care au doar un copil cu opacity: 0, dar părintele și ceilalți copii sunt vizibili. De asemenea, trebuie luat în considerare că un element poate fi ascuns din cauza dimensiunii (width/height 0) sau poziției în afara viewport-ului, dar acestea nu sunt proprietăți CSS "de ascundere" directe.

Cum se pot găsi toate elementele ascunse de pe pagină?