Wie kann man alle versteckten Elemente auf der Seite…

CSS-Selektoren können in Kombination mit JavaScript verwendet werden.

Hauptansätze:

Pseudo-Klasse :not(:visible) (nicht standardisiert): Obwohl CSS-Standard keinen direkten Selektor für "nicht sichtbar" hat, bieten einige Frameworks und Bibliotheken (z.B. jQuery) eigene Implementierungen an oder man kann eine eigene Logik erstellen. Dieser Ansatz ist eher konzeptuell zur Veranschaulichung.
Überprüfung von display, visibility und opacity: Dies ist die zuverlässigste Methode in nativen JavaScript. Unsichtbare Elemente sind solche mit display: none, visibility: hidden oder opacity: 0 (sofern sie keine Eltern mit diesen Eigenschaften sind).

// Alle Elemente auf der Seite abrufen
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // Überprüfung von display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Das Element ist versteckt, weitere Überprüfungen sind unnötig
  }

  // Überprüfung von visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Überprüfung von opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Komplexe Bedingung für opacity: Wir prüfen, ob das Element selbst unsichtbar ist wegen opacity: 0
    // und ob es keine sichtbaren Nachkommen hat (mit opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Zusätzliche Überprüfung auf Verstecken durch Eltern (komplizierteres Szenario)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Das Element ist durch den Elternteil versteckt
    }
    parent = parent.parentElement;
  }
});

console.log('Versteckte Elemente:', hiddenElements);

jQuery: jQuery vereinfacht diese Aufgabe mit seinem Pseudo-Selektor :hidden.

// Verwendung von jQuery, um versteckte Elemente zu finden
const hiddenElementsJquery = $(':hidden');

console.log('Versteckte Elemente (jQuery):', hiddenElementsJquery);

Wichtig: Bei Verwendung von nativem JavaScript erfordert die Überprüfung von opacity: 0 eine sorgfältige Analyse, um nicht Eltern in die Liste aufzunehmen, bei denen nur eines der Kinder opacity: 0 hat, aber das Elternteil und andere Kinder sichtbar sind. Außerdem sollte berücksichtigt werden, dass ein Element durch Größe (width/height 0) oder außerhalb des Viewports versteckt sein kann, was jedoch keine direkte CSS-Eigenschaft "Verstecken" ist.

Wie kann man alle versteckten Elemente auf der Seite finden?