Comment trouver tous les éléments cachés sur la page?

Il est possible d'utiliser des sélecteurs CSS en combinaison avec JavaScript.

Approches principales :

• Pseudo-classe :not(:visible) (non standard) : Bien que le CSS standard ne dispose pas d'un sélecteur direct pour "non visible", certains frameworks et bibliothèques (par exemple, jQuery) proposent leurs propres implémentations ou il est possible de créer une logique personnalisée. Cette approche est plus conceptuelle pour l'explication.
• Vérification de display, visibility et opacity : C'est la méthode la plus fiable en JavaScript natif. Les éléments cachés sont ceux avec display: none, visibility: hidden ou opacity: 0 (s'ils ne sont pas des parents d'éléments visibles).

// Récupérer tous les éléments de la page
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Vérification de display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // L'élément est caché, pas besoin de vérifier visibility et opacity
  }

  // Vérification de visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Vérification de opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Condition complexe pour opacity : on vérifie que l'élément lui-même est invisible à cause de opacity: 0
    // et qu'il n'a pas de descendants visibles (avec opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Vérification supplémentaire de l'occlusion par un parent (scénario plus complexe)
  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'élément est caché par le parent
    }
    parent = parent.parentElement;
  }
});

console.log('Éléments cachés :', hiddenElements);

• jQuery : jQuery facilite cette tâche avec son pseudo-sélecteur :hidden.

// Utilisation de jQuery pour rechercher les éléments cachés
const hiddenElementsJquery = $(':hidden');

console.log('Éléments cachés (jQuery) :', hiddenElementsJquery);

Important : Lors de l'utilisation de JavaScript natif, la vérification de opacity: 0 nécessite une analyse prudente pour ne pas inclure dans la liste des éléments cachés les parents dont un seul des enfants a opacity: 0, mais le parent et les autres enfants sont visibles. Il faut aussi considérer qu'un élément peut être masqué par sa taille (width/height 0) ou par sa position hors du viewport, mais cela ne relève pas directement d'une propriété CSS "de masquage".