Ինչպե՞ս գտնել էջի բոլոր թաքնված տարրերը:

CSS սելեկտորները կարելի է օգտագործել JavaScript-ի հետ համատեղ:

Հիմնական մոտեցումները՝

• ** :not(:visible) պսևդոկլասը (нестանդարտ)**: Չնայած CSS ստանդարտում չկա ուղիղ սելեկտոր "անտեսանելի" համար, որոշ ֆրեյմվորկներ և գրադարաններ (օրինակ jQuery) առաջարկում են իրենց իրականացմանը կամ կարող է ստեղծել օգտագործողի տրամաբանություն: Այս մոտեցումը ավելի շատ կոնցեպտուալ է բացատրության համար:
• display, visibility և opacity ստուգումները: Սա ամենահուսալի միջոցն է նատիվ JavaScript-ում: Անտեսանելի են այն տարրերը, որոնց 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-ի պատճառով
    // և որ նրա երեխաները տեսանելի են
    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 հատկությանը "թաքցնել"։