Chrome扩展开发：如何用getElementsByTagName等获取仅可见元素？

我明白你现在的困扰——用document.getElementsByTagName("input")拿到的元素里混了不少仅存在于DOM但实际没显示在页面上的，用offsetWidth这类属性又没法准确过滤，因为它们全返回0，还找不到visibility相关的样式。别担心，我给你几个靠谱的解决方案：

1. 用计算样式+递归检查父元素判断可见性 #

很多时候这些“隐形”元素要么是自身被CSS隐藏，要么是被父级元素的隐藏属性影响了。我们可以写一个工具函数，从元素本身到父级逐层检查：

function isElementVisible(element) {
  // 先排除无效元素
  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
    return false;
  }

  // 获取元素实际生效的样式
  const computedStyle = window.getComputedStyle(element);

  // 检查自身的核心隐藏样式
  if (computedStyle.display === 'none' || 
      computedStyle.visibility === 'hidden' || 
      computedStyle.opacity === '0') {
    return false;
  }

  // 检查元素是否有实际尺寸（排除那些占位为0的元素）
  const rect = element.getBoundingClientRect();
  if (rect.width === 0 && rect.height === 0) {
    return false;
  }

  // 递归检查父元素——父元素隐藏的话子元素也没法显示
  const parent = element.parentNode;
  if (parent && parent.nodeType === Node.ELEMENT_NODE) {
    return isElementVisible(parent);
  }

  return true;
}

2. 过滤可见input元素 #

有了上面的函数，你就可以轻松过滤出真正显示在页面上的input了：

const allInputs = document.getElementsByTagName("input");
// 转换成数组后过滤
const visibleInputs = Array.from(allInputs).filter(input => isElementVisible(input));

额外补充：过滤视口外的元素 #

如果你还想排除那些虽然样式可见但当前不在浏览器视口内的元素，可以在isElementVisible函数里加一段视口检查：

// 在检查尺寸之后添加这段代码
const isInViewport = rect.top < window.innerHeight && 
                     rect.bottom > 0 && 
                     rect.left < window.innerWidth && 
                     rect.right > 0;
if (!isInViewport) {
  return false;
}

这样就能精准筛选出当前页面中实际可见的input元素啦！

内容的提问来源于stack exchange，提问作者mk_