Беттеги бардык жашыруун элементтерди кантип табуу…

CSS селекторлорду JavaScript менен бирге колдонуу мүмкүн.

Негизги ыкмалар:

** :not(:visible) псевдокласс (стандарттык эмес)**: Стандарттык CSSде "көрүнбөгөн" үчүн түз селектор жок болсо да, кээ бир frameworkтер жана китепканалар (мисалы, jQuery) өз иштөө ыкмаларын сунуштайт же өз логикасын түзүүгө болот. Бул ыкма көбүнчө түшүндүрүү үчүн концептуалдуу.
display, visibility жана opacity текшерүүлөрү: Бул нативдүү JSде эң ишенимдүү ыкма. display: none, visibility: hidden же opacity: 0 менен белгиленген элементтер көрүнбөйт (эгер алар ата-эне эмес болсо).

// Баракчадагы бардык элементтерди алабыз
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none текшерүү
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Элемент жашырылган, ары карап текшерүүнүн кереги жок
  }

  // visibility: hidden текшерүү
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // opacity: 0 текшерүү
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Кыйын шарт: өзү көрүнбөйт, себеби opacity: 0
    // жана анын балдары көрүнбөйт (opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Ата-энесинен жашырылганын текшерүү
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break;
    }
    parent = parent.parentElement;
  }
});

console.log('Жашырылган элементтер:', hiddenElements);

jQuery: jQuery бул ишти :hidden псевдоклассы менен жеңилдетет:

// Жашырылган элементтерди табуу үчүн jQuery колдонобуз
const hiddenElementsJquery = $(':hidden');

console.log('Жашырылган элементтер (jQuery):', hiddenElementsJquery);

Маанилүү: Нативдүү JavaScript колдонууда, opacity: 0 текшерүү этияттык менен жасалышы керек, анткени ата-энелердин бир гана баласы opacity: 0 болсо да, өзү жана башка балдары көрүнүп турушу мүмкүн. Ошондой эле, элемент өлчөмү (эне ширели/биікти 0) же viewportтен тышкары жайгашкан болушу мүмкүн, бирок бул түз CSS өзгөчөлүгү "жашырылуу" эмес.

Беттеги бардык жашыруун элементтерди кантип табуу керек?