Ako nájsť všetky skryté prvky na stránke?

CSS selektory je možné používať v kombinácii s JavaScriptom.

Hlavné prístupy:

• ** :not(:visible) pseudo-trieda (nestandardná)**: Hoci štandardný CSS nemá priamy selektor pre "neviditeľné", niektoré rámce a knižnice (napríklad jQuery) ponúkajú svoje implementácie alebo je možné vytvoriť vlastnú logiku. Tento prístup je skôr koncepčný na vysvetlenie.
• Kontrola display, visibility a opacity: Ide o najspoľahlivejší spôsob v natívnom JS. Skryté prvky sú tie s display: none, visibility: hidden alebo opacity: 0 (ak nie sú rodičovskými prvkami pre viditeľných potomkov).

// Získavame všetky prvky na stránke
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Kontrola display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Prvok je skrytý, nemá zmysel ďalej kontrolovať 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')) ) {
    // Zložité podmienky pre opacity: kontrolujeme, že sám prvok je neviditeľný kvôli opacity: 0
    // a že nemá viditeľných potomkov (s opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Ďalšia kontrola na skrytie rodičom (zložitejší scenár)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Prvok je skrytý rodičom
    }
    parent = parent.parentElement;
  }
});

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

• jQuery: jQuery zjednodušuje tento úkol pomocou pseudo-triedy :hidden.

// Používame jQuery na hľadanie skrytých prvkov
const hiddenElementsJquery = $(':hidden');

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

Dôležité: Pri použití natívneho JavaScriptu vyžaduje kontrola opacity: 0 starostlivú analýzu, aby sa nezahrnuli rodičia, ktorých iba jeden z potomkov má opacity: 0, ale sám rodič a ostatní potomci sú viditeľní. Taktiež je potrebné vziať do úvahy, že prvok môže byť skrytý kvôli veľkosti (width/height 0) alebo pozícii mimo viewport, ale to už nie je priamo CSS vlastnosť "skrytie".