Kaip rasti visus paslėptus elementus puslapyje…

CSS selektorius galima naudoti kartu su JavaScript.

Pagrindiniai požiūriai:

** :not(:visible) pseudo-klasė (nestandartinė)**: Nors standartinis CSS neturi tiesioginio selektoriaus "nematomas", kai kurie karkasai ir bibliotekos (pvz., jQuery) siūlo savo realizacijas arba galima sukurti naudotojo logiką. Šis požiūris labiau konceptualus paaiškinimui.
display, visibility ir opacity patikrinimai: Tai patikimiausias būdas natūraliame JS. Slėpti elementai yra tie, kurių display: none, visibility: hidden arba opacity: 0 (jei jie nėra tėvų elementai matomiems vaikams).

// Gauname visus elementus puslapyje
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none patikrinimas
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Elementas paslėptas, tolesnė patikra nereikalinga
  }

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

  // opacity: 0 patikrinimas
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Sudėtinga sąlyga: tikriname, ar pats elementas nematomas dėl opacity: 0
    // ir ar neturi matomų vaikų (su opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Papildoma patikra dėl tėvo paslėpimo
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Elementas paslėptas tėvo
    }
    parent = parent.parentElement;
  }
});

console.log('Paslėpti elementai:', hiddenElements);

jQuery: jQuery palengvina šią užduotį naudodamas pseudo-klasę :hidden.

// Naudojame jQuery, kad surastume paslėptus elementus
const hiddenElementsJquery = $(':hidden');

console.log('Paslėpti elementai (jQuery):', hiddenElementsJquery);

Svarbu: Naudojant natūralų JavaScript, opacity: 0 patikra reikalauja kruopštaus analizės, kad neįtrauktų tėvų, kurių tik vienas vaikas turi opacity: 0, bet pats tėvas ir kiti vaikai yra matomi. Taip pat reikėtų atsižvelgti, kad elementas gali būti paslėptas dėl dydžio (plotis/aukštis 0) arba pozicijos už viewport'o ribų, tačiau tai jau nėra tiesiogiai CSS "paslėpimo" savybė.

Kaip rasti visus paslėptus elementus puslapyje?