Sayfada tüm gizli öğeleri nasıl bulabilirsiniz…

CSS seçicileri, JavaScript ile birlikte kullanılabilir.

Ana yaklaşımlar:

** :not(:visible) pseudo-sınıfı (standart olmayan)**: Standart CSS'te "görünmez" için doğrudan bir seçici olmasa da, bazı çerçeveler ve kütüphaneler (örneğin, jQuery) kendi uygulamalarını sunar veya özel mantık oluşturulabilir. Bu yaklaşım kavramsaldır ve açıklama içindir.
display, visibility ve opacity kontrolleri: Bu, yerel JS'de en güvenilir yoldur. Gizli kabul edilen öğeler, display: none, visibility: hidden veya opacity: 0 olanlardır (eğer ebeveynleri görünürse).

// Sayfadaki tüm öğeleri al
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

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

  // display: none kontrolü
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Öğenin gizli olduğu anlamına gelir, diğer kontroller gerekmez
  }

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

  // opacity: 0 kontrolü
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // opacity: 0 nedeniyle görünmez olan ve görünür çocukları olmayan öğe
    hiddenElements.push(element);
    return;
  }

  // Ek olarak, ebeveyn tarafından gizlenmiş olup olmadığını kontrol et
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Öğenin ebeveyn tarafından gizlendiği tespit edildi
    }
    parent = parent.parentElement;
  }
});

console.log('Gizli öğeler:', hiddenElements);

jQuery: jQuery, bu işlemi :hidden pseudo-sınıfı ile kolaylaştırır.

// jQuery kullanarak gizli öğeleri bul
const hiddenElementsJquery = $(':hidden');

console.log('Gizli öğeler (jQuery):', hiddenElementsJquery);

Önemli: Yerel JavaScript kullanırken, opacity: 0 kontrolü dikkatli analiz gerektirir; ebeveynlerin sadece bir çocuğu opacity: 0 olsa bile, ebeveyn ve diğer çocuklar görünürse, bu öğe gizlenmiş sayılmaz. Ayrıca, öğenin boyutunun (width/height 0) veya viewport dışına çıkmış olması da gizlenmiş sayılabilir, ancak bu doğrudan CSS "gizleme" özelliği değildir.

Sayfada tüm gizli öğeleri nasıl bulabilirsiniz?