Come trovare tutti gli elementi nascosti sulla…

È possibile utilizzare i selettori CSS in combinazione con JavaScript.

Approcci principali:

Pseudo-classe :not(:visible) (non standard): Sebbene lo standard CSS non abbia un selettore diretto per "non visibile", alcuni framework e librerie (ad esempio, jQuery) offrono proprie implementazioni o si può creare una logica personalizzata. Questo approccio è più concettuale per spiegazione.
Verifica di display, visibility e opacity: È il metodo più affidabile in JavaScript nativo. Gli elementi nascosti sono quelli con display: none, visibility: hidden o opacity: 0 (se non sono genitori di elementi visibili).

// Otteniamo tutti gli elementi della pagina
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Verifica di display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // L'elemento è nascosto, non ha senso verificare visibility e opacity
  }

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

  // Verifica di opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Condizione complessa per opacity: si verifica che l'elemento stesso sia invisibile a causa di opacity: 0
    // e che non abbia discendenti visibili (con opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Verifica aggiuntiva di occultamento da parte del genitore (scenario più complesso)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // L'elemento è nascosto dal genitore
    }
    parent = parent.parentElement;
  }
});

console.log('Elementi nascosti:', hiddenElements);

jQuery: jQuery semplifica questa operazione con il suo pseudo-selettore :hidden.

// Usando jQuery per trovare elementi nascosti
const hiddenElementsJquery = $(':hidden');

console.log('Elementi nascosti (jQuery):', hiddenElementsJquery);

Importante: Quando si utilizza JavaScript nativo, la verifica di opacity: 0 richiede un'analisi accurata per non includere nella lista elementi genitori che hanno solo un figlio con opacity: 0, ma il genitore e altri figli sono visibili. Inoltre, bisogna considerare che un elemento può essere nascosto a causa delle dimensioni (width/height 0) o della posizione fuori dal viewport, ma questa non è una proprietà CSS "di nascondimento" diretta.

Come trovare tutti gli elementi nascosti sulla pagina?