Kako pronaći sve skrivene elemente na stranici…

CSS selektori se mogu koristiti u kombinaciji sa JavaScript-om.

Glavni pristupi:

** :not(:visible) pseudo-klasa (nestandardno)**: Iako standardni CSS nema direktan selektor za "nevidljivo", neki okviri i biblioteke (npr. jQuery) nude svoje implementacije ili se može kreirati prilagođena logika. Ovaj pristup je više konceptualan za objašnjenje.
Provera display, visibility i opacity: Ovo je najpouzdaniji način u nativnom JS. Skriveni elementi su oni sa display: none, visibility: hidden ili opacity: 0 (ako nisu roditeljski elementi za vidljive potomke).

// Dobijamo sve elemente na stranici
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Provera display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Element je skriven, nema smisla dalje proveravati visibility i opacity
  }

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

  // Provera opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Složen uslov za opacity: proveravamo da li je sam element nevidljiv zbog opacity: 0
    // i da li ima vidljive potomke (s opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Dodatna provera za skrivanje od roditelja (složeniji scenario)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Element je skriven od roditelja
    }
    parent = parent.parentElement;
  }
});

console.log('Skriveni elementi:', hiddenElements);

jQuery: jQuery olakšava ovaj zadatak pomoću pseudo-klase :hidden.

// Koristimo jQuery za pronalaženje skrivenih elemenata
const hiddenElementsJquery = $(':hidden');

console.log('Skriveni elementi (jQuery):', hiddenElementsJquery);

Važno: Pri korišćenju nativnog JavaScript-a, provera opacity: 0 zahteva pažljivu analizu, da se ne uključe roditeljski elementi kod kojih samo jedan od potomaka ima opacity: 0, ali sam roditelj i ostali potomci su vidljivi. Takođe, treba imati u vidu da element može biti skriven zbog veličine (width/height 0) ili pozicije van viewport-a, ali to već nije direktno CSS svojstvo "skrivenosti".

Kako pronaći sve skrivene elemente na stranici?