Kā atrast visus slēptos elementus lapā?

CSS selektorus var izmantot kopā ar JavaScript.

Galvenie pieejas:

• ** :not(:visible) pseido-klase (nestandarta)**: Lai gan standarta CSS nav tieša selektora "neredzams", dažas rāmi un bibliotēkas (piemēram, jQuery) piedāvā savas realizācijas vai arī var izveidot lietotāja loģiku. Šī pieeja ir vairāk koncepcijas līmenī.
• display, visibility un opacity pārbaudes: Tas ir visuzticamākais veids nativajā JS. Slēptie elementi ir tie ar display: none, visibility: hidden vai opacity: 0 (ja tie nav vecāki elementi, kas ir redzami bērniem).

// Saņemam visus elementus lapā
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none pārbaude
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // elements ir slēpti, tāpēc nav jēgas turpināt pārbaudi
  }

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

  // opacity: 0 pārbaude
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Sarežģīts nosacījums: pārbaudām, vai pats elements ir necaurredzams dēļ opacity: 0
    // un vai tam nav redzamu bērnu (ar opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Papildu pārbaude par vecāka slēpšanu
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // elements ir slēpti vecāka dēļ
    }
    parent = parent.parentElement;
  }
});

console.log('Slēptie elementi:', hiddenElements);

• jQuery: jQuery atvieglo šo uzdevumu ar pseido-klasi :hidden.

// Meklējam slēptos elementus ar jQuery
const hiddenElementsJquery = $(':hidden');

console.log('Slēptie elementi (jQuery):', hiddenElementsJquery);

Svarīgi: Izmantojot nativu JavaScript, opacity: 0 pārbaude prasa rūpīgu analīzi, lai neiekļautu vecākus, kuriem tikai viens bērns ir ar opacity: 0, bet pats vecāks un citi bērni ir redzami. Tāpat jāņem vērā, ka elements var būt paslēpts arī izmēra (platums/augstums 0) vai atrašanās vietas ārpus viewport, bet tas jau nav tieši CSS "slēpšanas" īpašība.