Как да намерим всички скрити елементи на страницата…

Може да се използват CSS селектори в съчетание с JavaScript.

Основни подходи:

** :not(:visible) псевдоклас (нестандартен)**: Въпреки че стандартният CSS няма директен селектор за "невидим", някои рамки и библиотеки (например 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 и opacity
  }

  // Проверка за 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: проверяваме, че самият елемент е невидим заради 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, но самият родител и другите потомци са видими. Също така трябва да се има предвид, че елемент може да е скрит поради размер (width/height 0) или позициониране извън viewport, но това вече не е директно CSS свойство "скритост".

Как да намерим всички скрити елементи на страницата?