Javascript querySelectorAll on :visible 元素不是有效的选择器答案

【问题标题】：Javascript querySelectorAll on :visible elements is not a valid selectorJavascript querySelectorAll on :visible 元素不是有效的选择器
【发布时间】：2021-07-14 20:48:13
【问题描述】：

我正在尝试定位我网页上的一些在 DOM 中可见的类，但由于某种原因，我收到了一个错误：

未捕获的 DOMException：无法在“文档”上执行“querySelectorAll”：“.form-control:visible”不是有效的选择器。

这确实有效，我错过了什么？

我的 HTML：

<input type="checkbox" class="form-control" />
<input type="checkbox" class="form-control" />
<input type="checkbox" class="form-control" />

我的 JS：

const inputs = document.querySelectorAll('.form-control:visible')

for (const [index, input] of inputs.entries()) {
    console.log(input)
}

我在这里错过了什么？

【问题讨论】：

如何控制这些元素的可见性？按类、内联样式还是？？
始终显示输入，使用style 和类的组合显示/隐藏周围的元素，在我的实际表单中有超过 100 个输入和 20 多个步骤 - 附件只是一个小的复制品，实际上，我们谈论的是一个 2000+ 行的大型 HTML 项目。所以需要最简单的解决方案来识别输入的可见性（我有输入、选择和单选组，它们都需要应用相同的解决方案）
有多种方法可用于管理大型表单中的步骤。我假设其中很多涉及隐藏使用字段集可能非常有用的整个部分您需要完成的示例将有所帮助
那么是什么让它们不可见？您将不得不关闭它，否则您将不得不全部选择它们并使用 filter()

标签： javascript html

【解决方案1】：

喂！ JavaScript 中没有这样的 ":visible" 选择器。 ":visible" 是 jQuery 的选择器，用于创建不透明度 0 和 1 或鞋子和隐藏。谢谢

【讨论】：

:visible 不会创建不透明度。第一个陈述根本不正确

【解决方案2】：

无效，the specification 中没有列出:visible 伪类。

jQuery 支持:visible selector，但它是非标准的，您没有使用 jQuery。

jQuery 文档说：

因为 :visible 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :visible 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :visible 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":visible")。

【讨论】：