Javascript querySelectorAll on：可见元素不是有效的选择器

Question

I'm trying to target some classes on my web page which are visible in the DOM, but for some reason I'm getting an error:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.form-control:visible' is not a valid selector.

Surely this is valid, what am I missing?

My HTML:

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

My JS:

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

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

What am I missing here?

Answer 1

It is not valid, there is no :visible pseudo-class listed in the specification .

jQuery supports a :visible selector , but it is non-standard and you aren't using jQuery.

The jQuery documentation says:

Because:visible is a jQuery extension and not part of the CSS specification, queries using:visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using:visible to select elements, first select the elements using a pure CSS selector, then use.filter(":visible").

Answer 2

Hy: There is no such ".visible" selector in JavaScript. ":visible" is a selector of jQuery which is used to create opacity 0 and 1 or shoe and hide. Thanks