Jak znaleźć wszystkie ukryte elementy na stronie…

Możesz używać selektorów CSS w połączeniu z JavaScript.

Główne podejścia:

Pseudo-klasa :not(:visible) (niestandardowa): Chociaż standard CSS nie posiada bezpośredniego selektora dla "niewidzialnych", niektóre frameworki i biblioteki (np. jQuery) oferują własne implementacje lub można stworzyć własną logikę. To podejście jest bardziej koncepcyjne dla celów wyjaśnienia.
Sprawdzanie display, visibility i opacity: To najpewniejszy sposób w natywnym JS. Ukryte elementy to te z display: none, visibility: hidden lub opacity: 0 (jeśli nie są rodzicami widocznych elementów).

// Pobieramy wszystkie elementy na stronie
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Sprawdzanie display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Element jest ukryty, nie ma sensu sprawdzać visibility i opacity
  }

  // Sprawdzanie visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Sprawdzanie opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Złożony warunek dla opacity: sprawdzamy, czy sam element jest niewidoczny z powodu opacity: 0
    // i czy nie ma widocznych potomków (z opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Dodatkowa kontrola ukrycia przez element rodzica (bardziej złożony scenariusz)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Element jest ukryty przez rodzica
    }
    parent = parent.parentElement;
  }
});

console.log('Ukryte elementy:', hiddenElements);

jQuery: jQuery upraszcza to zadanie za pomocą pseudo-selektora :hidden.

// Użycie jQuery do wyszukiwania ukrytych elementów
const hiddenElementsJquery = $(':hidden');

console.log('Ukryte elementy (jQuery):', hiddenElementsJquery);

Ważne: Przy użyciu natywnego JavaScript, sprawdzanie opacity: 0 wymaga starannej analizy, aby nie uwzględnić w liście elementów ukrytych rodziców, których tylko jedno z potomków ma opacity: 0, ale sam rodzic i inne potomki są widoczne. Należy także brać pod uwagę, że element może być ukryty z powodu rozmiaru (width/height 0) lub położenia poza widokiem, ale to nie jest bezpośrednio właściwość CSS "ukrycia".

Jak znaleźć wszystkie ukryte elementy na stronie?