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

Поиск скрытых элементов на странице

Скрытые элементы — это элементы, которые не видны пользователю, но присутствуют в DOM. Найти и работать с ними бывает нужно при отладке, тестировании или автоматизации.

Что считается скрытым элементом?

Элемент считается скрытым, если:

• display: none
• visibility: hidden
• opacity: 0
• Родитель скрыт
• За границами viewport
• width: 0 или height: 0
• position: absolute с отрицательными координатами

Способ 1: querySelectorAll с фильтром display

// Найти все элементы с display: none
const hiddenElements = Array.from(document.querySelectorAll('*')).filter(el => {
  const style = window.getComputedStyle(el);
  return style.display === 'none';
});

console.log(hiddenElements);

Способ 2: Проверка visibility и opacity

const getHiddenElements = () => {
  return Array.from(document.querySelectorAll('*')).filter(el => {
    const style = window.getComputedStyle(el);
    return (
      style.display === 'none' ||
      style.visibility === 'hidden' ||
      style.opacity === '0'
    );
  });
};

const hidden = getHiddenElements();
console.log('Скрытые элементы:', hidden);

Способ 3: Комплексная проверка с getComputedStyle

function isElementHidden(element) {
  // Проверяем сам элемент
  const style = window.getComputedStyle(element);
  
  if (style.display === 'none') return true;
  if (style.visibility === 'hidden') return true;
  if (style.opacity === '0') return true;
  
  // Проверяем, скрыт ли родитель
  if (element.parentElement) {
    return isElementHidden(element.parentElement);
  }
  
  return false;
}

const hiddenElements = Array.from(document.querySelectorAll('*')).filter(isElementHidden);
console.log('Все скрытые элементы:', hiddenElements);

Способ 4: Использование offsetHeight и offsetWidth

const getInvisibleElements = () => {
  return Array.from(document.querySelectorAll('*')).filter(el => {
    return el.offsetHeight === 0 || el.offsetWidth === 0;
  });
};

const invisible = getInvisibleElements();
console.log('Элементы с нулевыми размерами:', invisible);

Способ 5: Проверка через getBoundingClientRect

const isElementInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
};

const elementsOutsideViewport = Array.from(document.querySelectorAll('*')).filter(el => {
  return !isElementInViewport(el);
});

console.log('Элементы за границами viewport:', elementsOutsideViewport);

Практический пример: полная проверка видимости

function analyzeElementVisibility(element) {
  const style = window.getComputedStyle(element);
  const rect = element.getBoundingClientRect();

  const visibility = {
    element: element,
    tag: element.tagName,
    class: element.className,
    display: style.display,
    visibility: style.visibility,
    opacity: style.opacity,
    width: element.offsetWidth,
    height: element.offsetHeight,
    inViewport: (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= window.innerHeight &&
      rect.right <= window.innerWidth
    ),
    isVisible: (
      style.display !== 'none' &&
      style.visibility !== 'hidden' &&
      style.opacity !== '0' &&
      element.offsetHeight > 0 &&
      element.offsetWidth > 0
    )
  };

  return visibility;
}

// Использование
const allElements = document.querySelectorAll('*');
allElements.forEach(el => {
  const analysis = analyzeElementVisibility(el);
  if (!analysis.isVisible) {
    console.log(analysis);
  }
});

Способ 6: IntersectionObserver для видимости в viewport

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      console.log('Элемент не видим:', entry.target);
    }
  });
});

// Наблюдаем за всеми элементами
const elements = document.querySelectorAll('*');
elements.forEach(el => observer.observe(el));

Утилита для поиска скрытых элементов

class HiddenElementFinder {
  static findByDisplay() {
    return Array.from(document.querySelectorAll('[style*="display"]'))
      .filter(el => window.getComputedStyle(el).display === 'none');
  }

  static findByVisibility() {
    return Array.from(document.querySelectorAll('[style*="visibility"]'))
      .filter(el => window.getComputedStyle(el).visibility === 'hidden');
  }

  static findByOpacity() {
    return Array.from(document.querySelectorAll('[style*="opacity"]'))
      .filter(el => parseFloat(window.getComputedStyle(el).opacity) === 0);
  }

  static findBySize() {
    return Array.from(document.querySelectorAll('*'))
      .filter(el => el.offsetHeight === 0 || el.offsetWidth === 0);
  }

  static findAll() {
    const hidden = new Set();
    Array.from(document.querySelectorAll('*')).forEach(el => {
      const style = window.getComputedStyle(el);
      if (
        style.display === 'none' ||
        style.visibility === 'hidden' ||
        parseFloat(style.opacity) === 0 ||
        el.offsetHeight === 0 ||
        el.offsetWidth === 0
      ) {
        hidden.add(el);
      }
    });
    return Array.from(hidden);
  }
}

// Использование
console.log('Скрытые элементы:', HiddenElementFinder.findAll());
console.log('display:none:', HiddenElementFinder.findByDisplay());
console.log('visibility:hidden:', HiddenElementFinder.findByVisibility());

Консольные команды для отладки

// В DevTools консоли можно выполнить прямо

// Найти все скрытые элементы
Array.from(document.querySelectorAll('*')).filter(el => 
  window.getComputedStyle(el).display === 'none'
)

// Выделить скрытые элементы в красный
Array.from(document.querySelectorAll('*')).forEach(el => {
  if (window.getComputedStyle(el).display === 'none') {
    el.style.outline = '2px solid red';
    el.style.display = 'block';
  }
})

// Показать все скрытые элементы
Array.from(document.querySelectorAll('[style*="display: none"]')).forEach(el => {
  el.style.display = 'block';
})

Важные замечания

• getComputedStyle: возвращает расчётные стили (включая CSS из файлов)
• offsetHeight/offsetWidth: 0 если элемент не отображается
• getBoundingClientRect: полезна для проверки видимости в viewport
• Родительские элементы: если родитель скрыт, то и дети скрыты

Поиск скрытых элементов полезен при отладке, тестировании и анализе производительности страницы.