Как можно найти все скрытые элементы на странице?

Можно использовать селекторы 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) или положения за пределами вьюпорта, но это уже не является прямым CSS-свойством "скрытость".