¿Cómo se pueden encontrar todos los elementos ocultos en la página?

Se pueden usar selectores CSS en combinación con JavaScript.

Enfoques principales:

• Pseudo-clase :not(:visible) (no estándar): Aunque CSS estándar no tiene un selector directo para "no visible", algunos frameworks y bibliotecas (por ejemplo, jQuery) ofrecen sus propias implementaciones o se puede crear lógica personalizada. Este enfoque es más conceptual para ilustrar.
• Verificación de display, visibility y opacity: Es la forma más confiable en JavaScript nativo. Los elementos ocultos se consideran aquellos con display: none, visibility: hidden o opacity: 0 (si no son elementos padres de elementos visibles).

// Obtenemos todos los elementos en la página
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Verificación de display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // El elemento está oculto, no tiene sentido verificar visibility y opacity
  }

  // Verificación de visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Verificación de opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Condición compleja para opacity: verificamos que el elemento no sea visible por opacity: 0
    // y que no tenga hijos visibles (con opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Verificación adicional de ocultación por elemento padre (escenario más complejo)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // El elemento está oculto por el padre
    }
    parent = parent.parentElement;
  }
});

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

• jQuery: jQuery simplifica esta tarea con su pseudo-clase :hidden.

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

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

Importante: Cuando se usa JavaScript nativo, verificar opacity: 0 requiere un análisis cuidadoso para no incluir en la lista elementos padres que solo tienen un hijo con opacity: 0, pero el padre y otros hijos son visibles. También hay que considerar que un elemento puede estar oculto por tamaño (width/height 0) o por estar fuera del viewport, pero esto ya no es una propiedad CSS "de ocultación" directa.