Hogyan találhatjuk meg az összes rejtett elemet az…

CSS-szűrőket JavaScript-tel kombinálva lehet használni.

Fő megközelítések:

** :not(:visible) pszeudo-osztály (nem szabványos)**: Bár a CSS szabvány nem rendelkezik közvetlen szűrővel a "nem látható" elemekhez, néhány keretrendszer és könyvtár (például jQuery) saját implementációkat kínál, vagy saját logikát lehet létrehozni. Ez a megközelítés inkább elméleti a magyarázathoz.
display, visibility és opacity ellenőrzése: Ez a legmegbízhatóbb módszer natív JS-ben. A rejtett elemek azok, amelyek display: none, visibility: hidden vagy opacity: 0 értékkel rendelkeznek (ha nem szülőelemük látható).

// Az összes elem lekérése az oldalon
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none ellenőrzése
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Az elem rejtett, nincs értelme további ellenőrzést végezni
  }

  // visibility: hidden ellenőrzése
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // opacity: 0 ellenőrzése
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Komplex feltétel az opacity: 0 esetén: ellenőrizzük, hogy maga az elem láthatatlan-e az opacity: 0 miatt
    // és hogy nincs látható leszármazottja (opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // További ellenőrzés: szülő által elrejtett elem (bonyolultabb szcenárió)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Az elem szülő által elrejtett
    }
    parent = parent.parentElement;
  }
});

console.log('Rejtett elemek:', hiddenElements);

jQuery: jQuery megkönnyíti ezt a feladatot a :hidden pszeudo-osztállyal.

// A rejtett elemek keresése jQuery-vel
const hiddenElementsJquery = $(':hidden');

console.log('Rejtett elemek (jQuery):', hiddenElementsJquery);

Fontos: Natív JavaScript használatakor az opacity: 0 ellenőrzése körültekintő elemzést igényel, hogy ne vegye figyelembe azokat a szülőket, amelyeknek csak egy gyermekük opacity: 0, de maga a szülő és más gyermekek láthatóak. Továbbá figyelembe kell venni, hogy egy elem rejtett lehet méret (width/height 0) vagy a viewporton kívül helyezkedés miatt, de ez már nem közvetlen CSS "elrejtés" tulajdonság.

Hogyan találhatjuk meg az összes rejtett elemet az oldalon?