JavaScript中无法用CSS样式直接查找隐藏节点，需先用querySelectorAll定位再通过getComputedStyle判断display:none、visibility:hidden或opacity:0；还需考虑hidden属性及祖先元素隐藏的影响。
在 JavaScript 中，无法直接通过 CSS 样式（比如 display: none 或 visibility: hidden）来“查找”节点，因为 DOM 查询方法（如 querySelectorAll）不支持按计算样式筛选。但你可以结合选择器定位元素后，再用 getComputedStyle 判断其是否隐藏。
识别常见隐藏方式的节点
页面中元素“隐藏”通常有以下几种情况，需分别判断：
-
display: none — 元素不占布局空间，
getComputedStyle(el).display === 'none' -
visibility: hidden — 元素仍占空间，但不可见，
getComputedStyle(el).visibility === 'hidden' -
opacity: 0 — 视觉上透明，但交互仍可能生效，
getComputedStyle(el).opacity === '0' - height/width 为 0 + overflow: hidden — 需额外检查尺寸和溢出，较罕见，一般不作为主判定依据
用 querySelectorAll + 过滤获取隐藏节点
先选中目标范围内的元素（例如所有 div），再用 Array.from 和 filter 筛出隐藏的：
const hiddenDivs = Array.from(
document.querySelectorAll('div')
).filter(el => {
const style = getComputedStyle(el);
return style.display === 'none' ||
style.visibility === 'hidden' ||
style.opacity === '0';
});
⚠️ 注意：getComputedStyle 返回的是最终计算值，对内联样式、CSS 类、继承都有效，但不反映 hidden 属性或条件渲染（如 Vue/React 的虚拟 DOM 状态）。
立即学习“Java免费学习笔记（深入）”；
处理 hidden 属性和祖先隐藏
HTML5 的 hidden 属性是语义化隐藏，可直接用属性选择器：
document.querySelectorAll('[hidden]')
但要注意：即使子元素没设 hidden，只要其某个**祖先元素被隐藏**（如 display: none），该子元素实际也不可见。要检测“真正不可见”，需向上遍历父级：
function isActuallyHidden(el) {
if (el.hidden || getComputedStyle(el).display === 'none') return true;
let parent = el.parentElement;
while (parent) {
if (getComputedStyle(parent).display === 'none') return true;
parent = parent.parentElement;
}
return false;
}
性能与使用建议
频繁调用 getComputedStyle 可能触发重排，应避免在循环或动画帧中大量使用。实用建议：
- 优先用明确的选择器缩小范围，比如
.sidebar [type="password"]而非全量* - 如只需判断单个元素，不用
Array.from，直接if (isActuallyHidden(el)) { ... } - 框架项目中，隐藏逻辑常由数据状态驱动（如
v-if、*ngIf），此时查 DOM 不如查对应数据
