Πώς μπορούμε να βρούμε όλα τα κρυφά στοιχεία στη…

Μπορείτε να χρησιμοποιήσετε επιλεκτές CSS σε συνδυασμό με JavaScript.

Κύριες προσεγγίσεις:

Pseudo-κλάση :not(:visible) (μη τυπική): Αν και το τυπικό CSS δεν διαθέτει άμεσο επιλεκτή για "μη ορατό", ορισμένα frameworks και βιβλιοθήκες (π.χ. jQuery) προσφέρουν τις δικές τους υλοποιήσεις ή μπορείτε να δημιουργήσετε δική σας λογική. Αυτή η προσέγγιση είναι περισσότερο εννοιολογική για επεξήγηση.
Έλεγχος display, visibility και opacity: Αυτή είναι η πιο αξιόπιστη μέθοδος σε native 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: 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);

Σημαντικό: Όταν χρησιμοποιείτε native JavaScript, ο έλεγχος opacity: 0 απαιτεί προσεκτική ανάλυση, ώστε να μην συμπεριληφθούν γονείς που έχουν μόνο ένα παιδί με opacity: 0, αλλά ο γονέας και άλλα παιδιά είναι ορατά. Επίσης, πρέπει να ληφθεί υπόψη ότι ένα στοιχείο μπορεί να είναι κρυφό λόγω μεγέθους (width/height 0) ή εκτός ορατού πεδίου, αλλά αυτό δεν αποτελεί άμεση CSS "ιδιότητα απόκρυψης".

Πώς μπορούμε να βρούμε όλα τα κρυφά στοιχεία στη σελίδα;