Səhifədəki bütün gizli elementləri necə tapmaq olar?

CSS seçiciləri JavaScript ilə birlikdə istifadə edilə bilər.

Əsas yanaşmalar:

• ** :not(:visible) pseudo-sinfi (standart olmayan)**: Standart CSS-də "görünməz" üçün birbaşa seçici olmasa da, bəzi çərçivələr və kitabxanalar (məsələn, jQuery) öz tətbiqlərini təklif edir və ya öz məntiqinizi yarada bilərsiniz. Bu yanaşma daha çox konseptualdır və izah üçün.
• display, visibility və opacity yoxlaması: Bu, yerli JS-də ən etibarlı yoldur. Gizli elementlər display: none, visibility: hidden və ya opacity: 0 olanlardır (əgər valideyn elementləri yoxdursa).

// Səhifədəki bütün elementləri əldə edin
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none yoxlaması
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Element gizlidir, digər yoxlamalar lazım deyil
  }

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

  // opacity: 0 yoxlaması
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // opacity: 0 üçün mürəkkəb şərt: yoxlayırıq ki, element özü opacity: 0 ilə görünməzdir
    // və onun görünən uşaqları yoxdur (opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Əlavə yoxlama: valideyn tərəfindən gizlədilmə (daha mürəkkəb ssenari)
  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 valideyn tərəfindən gizlidir
    }
    parent = parent.parentElement;
  }
});

console.log('Gizli elementlər:', hiddenElements);

• jQuery: jQuery bu işi :hidden pseudo-sinfi ilə sadələşdirir.

// Gizli elementləri tapmaq üçün jQuery istifadə edin
const hiddenElementsJquery = $(':hidden');

console.log('Gizli elementlər (jQuery):', hiddenElementsJquery);

Vacib: Native JavaScript istifadə edərkən, opacity: 0 yoxlaması diqqətlə aparılmalıdır ki, valideynlərdən yalnız bir uşağı opacity: 0 olsa da, valideyn və digər uşaqlar görünürsə, element gizli sayılmaz. Həmçinin, elementin ölçüsü (width/height 0) və ya viewport-dan kənarda olması da gizli sayılır, amma bu birbaşa CSS "gizlilik" xüsusiyyəti deyil.