Javascript 获取所有隐藏元素

有时候，我们需要获取页面中所有的隐藏元素，这个时候如何用 Javascript 实现呢？本文将介绍几种方法用于获取页面中所有隐藏的元素。

方法一：使用 jQuery 库

jQuery 是一个提供高效、简洁 API 的 Javascript 库，它可以方便地获取页面中的元素。在 jQuery 中，我们可以使用 ":hidden" 选择器来匹配所有的隐藏元素，具体实现代码如下：

// 引入 jQuery 库
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

// 获取所有隐藏的元素
var hiddenElements = $("*:hidden");

方法二：使用原生 Javascript

如果项目中没有使用 jQuery 库，我们也可以使用纯 Javascript 来获取所有隐藏的元素。我们可以使用 document.querySelectorAll() 方法来获取所有的元素，然后遍历每个元素，判断该元素是否隐藏。如果元素隐藏，将其加入数组中。具体实现代码如下：

// 获取所有元素
var elements = document.querySelectorAll("*");

// 遍历每个元素
for (var i = 0; i < elements.length; i++) {
  // 判断元素是否隐藏
  if (elements[i].getAttribute("type") == "hidden" ||
      elements[i].style.display == "none") {
    // 将隐藏元素加入数组中
    hiddenElements.push(elements[i]);
  }
}

方法三：使用 CSS 样式

我们可以在 CSS 样式表中定义一个 ".hidden" 的类，来标识所有的隐藏元素。随后，我们可以使用 document.querySelectorAll() 方法来获取所有带有 ".hidden" 类的元素，具体实现代码如下：

/* 在 CSS 样式表中定义 .hidden 类 */
.hidden {
  display: none;
}

// 获取所有带有 .hidden 类的元素
var hiddenElements = document.querySelectorAll(".hidden");

总结

本文介绍了三种方法用于获取页面中所有隐藏的元素，包括使用 jQuery 库、原生 Javascript 和 CSS 样式表。具体选择哪种方法，可以根据实际情况来决定。