Kuidas leida kogu lehel peidetud elemendid?

CSS valija selektorus var kasutada koos JavaScriptiga.

Peamised lähenemised:

• ** :not(:visible) pseudo-klassi (mitte-standardsed)**: Kuigi CSS standardis ei ole otsest selektorit "mitte-nähtav", pakuvad mõned raamistikud ja teegid (näiteks jQuery) oma rakendusi või saab luua kasutaja loogika. See lähenemine on pigem kontseptuaalne selgituse jaoks.
• display, visibility ja opacity kontrollid: See on kõige usaldusväärsem viis natiivses JS-is. Peidetud elemendid on need, millel on display: none, visibility: hidden või opacity: 0 (kui nad ei ole vanemad nähtavate järglaste jaoks).

// Saame kõik elemendid lehel
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Kontroll display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Element on peidetud, pole mõtet edasi kontrollida visibility ja opacity
  }

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

  // Kontroll opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Keeruline tingimus: kontrollime, et element ise on nähtamatu opacity: 0 tõttu
    // ja et tal ei ole nähtavaid järglasi (suurus > 0)
    hiddenElements.push(element);
    return;
  }

  // Täiendav kontroll vanema peitmise kohta
  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 on peidetud vanema poolt
    }
    parent = parent.parentElement;
  }
});

console.log('Peidetud elemendid:', hiddenElements);

• jQuery: jQuery lihtsustab seda ülesannet oma pseudo-klassiga :hidden.

// Kasutame jQuery-d peidetud elementide otsimiseks
const hiddenElementsJquery = $(':hidden');

console.log('Peidetud elemendid (jQuery):', hiddenElementsJquery);

Oluline: Natiivse JavaScripti kasutamisel nõuab opacity: 0 kontroll hoolikat analüüsi, et mitte kaasata vanemaid, kellel on ainult üks järglane opacity: 0, kuid ise ja teised järglased on nähtavad. Samuti tuleb arvestada, et element võib olla peidetud suuruse (laius/kõrgus 0) või asukoha tõttu väljaspool vaadet, kuid see ei ole otseselt CSS "peitmise" omadus.