Como encontrar todos os elementos ocultos na página?

É possível usar seletores CSS em combinação com JavaScript.

Abordagens principais:

• Pseudo-classe :not(:visible) (não padrão): Embora o CSS padrão não tenha um seletor direto para "não visível", alguns frameworks e bibliotecas (por exemplo, jQuery) oferecem suas próprias implementações ou é possível criar lógica personalizada. Essa abordagem é mais conceitual para explicação.
• Verificação de display, visibility e opacity: É a forma mais confiável em JavaScript nativo. Elementos ocultos são considerados aqueles com display: none, visibility: hidden ou opacity: 0 (se não forem elementos pais de elementos visíveis).

// Obtemos todos os elementos na página
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Verificação de display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // O elemento está oculto, não faz sentido verificar visibility e opacity
  }

  // Verificação de visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Verificação de opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Condição complexa para opacity: verificamos que o próprio elemento é invisível por opacity: 0
    // e que não tem descendentes visíveis (com opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Verificação adicional de ocultação por elemento pai (cenário mais complexo)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // O elemento está oculto pelo pai
    }
    parent = parent.parentElement;
  }
});

console.log('Elementos ocultos:', hiddenElements);

• jQuery: jQuery simplifica essa tarefa com seu pseudo-seletor :hidden.

// Usando jQuery para procurar elementos ocultos
const hiddenElementsJquery = $(':hidden');

console.log('Elementos ocultos (jQuery):', hiddenElementsJquery);

Importante: Ao usar JavaScript nativo, verificar opacity: 0 requer uma análise cuidadosa para não incluir na lista elementos pais que apenas um dos filhos tem opacity: 0, mas o pai e outros filhos são visíveis. Também deve-se considerar que um elemento pode estar oculto por tamanho (width/height 0) ou por estar fora do viewport, mas isso já não é uma propriedade CSS "de ocultação" direta.