Jak najít všechny skryté prvky na stránce?

CSS selektory lze používat ve spojení s JavaScriptem.

Hlavní přístupy:

• ** :not(:visible) pseudo-třída (nestandardní)**: Ačkoliv standardní CSS nemá přímý selektor pro "neviditelné", některé frameworky a knihovny (například jQuery) nabízejí své implementace nebo lze vytvořit vlastní logiku. Tento přístup je spíše koncepční pro vysvětlení.
• Kontrola display, visibility a opacity: Jedná se o nejspolehlivější způsob v nativním JS. Skryté jsou prvky s display: none, visibility: hidden nebo opacity: 0 (pokud nejsou rodičovským prvkem pro viditelné potomky).

// Získáme všechny prvky na stránce
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Kontrola display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Prvek je skrytý, nemá smysl dále kontrolovat visibility a opacity
  }

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

  // Kontrola opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Složitá podmínka pro opacity: kontrolujeme, že sám prvek je neviditelný kvůli opacity: 0
    // a že nemá viditelné potomky (s opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Další kontrola na skrytí rodičem (složitější scénář)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Prvek je skrytý rodičem
    }
    parent = parent.parentElement;
  }
});

console.log('Skryté prvky:', hiddenElements);

• jQuery: jQuery zjednodušuje tento úkol pomocí pseudo-třídy :hidden.

// Použití jQuery pro hledání skrytých prvků
const hiddenElementsJquery = $(':hidden');

console.log('Skryté prvky (jQuery):', hiddenElementsJquery);

Důležité: Při použití nativního JavaScriptu vyžaduje kontrola opacity: 0 pečlivou analýzu, aby se nezahrnuli rodiče, jejichž pouze jeden z potomků má opacity: 0, ale sám rodič i ostatní potomci jsou viditelní. Také je třeba vzít v úvahu, že prvek může být skryt kvůli velikosti (width/height 0) nebo umístění mimo viewport, ale to již není přímým CSS vlastností "skrytost".