Sahifadagi barcha yashirin elementlarni qanday topish…

CSS selektorlarini JavaScript bilan birgalikda ishlatish mumkin.

Asosiy yondashuvlar:

** :not(:visible) pseudo-sinf (standart emas)**: Standart CSSda "nashr qilinmagan" uchun to'g'ridan-to'g'ri selektor bo'lmasa-da, ba'zi frameworklar va kutubxonalar (masalan, jQuery) o'zlarining amalga oshirishlarini taklif qiladi yoki shaxsiy logika yaratish mumkin. Bu yondashuv tushunchaviy bo'lib, tushuntirish uchun.
display, visibility va opacity tekshiruvi: Bu nativ JSda eng ishonchli usul. Yashirilgan elementlar display: none, visibility: hidden yoki opacity: 0 bo'lganlar hisoblanadi (agar ular ko'rinadigan elementlarning ota-onalari bo'lmasa).

// Sahifadagi barcha elementlarni olish
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none tekshiruvi
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Element yashirilgan, boshqa tekshiruvga hojat yo'q
  }

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

  // opacity: 0 tekshiruvi
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // opacity: 0 uchun murakkab shart: element o'zi opacity: 0 bilan ko'rinmaydi
    // va uning ko'rinadigan bolalari (opacity > 0) yo'q
    hiddenElements.push(element);
    return;
  }

  // Qo'shimcha tekshirish: ota-ona tomonidan yashirish (qiyinroq holat)
  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 ota-ona tomonidan yashirilgan
    }
    parent = parent.parentElement;
  }
});

console.log('Yashirilgan elementlar:', hiddenElements);

jQuery: jQuery bu vazifani :hidden pseudo-sinfi bilan soddalashtiradi.

// jQuery yordamida yashirilgan elementlarni topish
const hiddenElementsJquery = $(':hidden');

console.log('Yashirilgan elementlar (jQuery):', hiddenElementsJquery);

Muhim: Nativ JavaScript bilan ishlaganda, opacity: 0 tekshiruvi ehtiyotkorlik bilan amalga oshirilishi kerak, shunda ota-ona va uning faqat bir bolasi opacity: 0 bo'lsa ham, ota-ona va boshqa bolalar ko'rinadigan bo'lsa, element yashirilmagan hisoblanadi. Shuningdek, element o'lchami (width/height 0) yoki viewportdan tashqarida bo'lishi ham yashirilgan bo'lishi mumkin, ammo bu to'g'ridan-to'g'ri CSS "yashirish" xususiyati emas.

Sahifadagi barcha yashirin elementlarni qanday topish mumkin?