查询选择器选择器不一致

Inconsistent selector for querySelectorAll

本文关键字：选择器 不一致 查询      更新时间：2023-09-26

在JavaScript中使用:checked选择器时，document.querySelectorAll()，我看到存在不一致的行为。当:checked选择器用于复选框或单选按钮时，它不需要冒号 （:) 之前的空格，但是当它用于选择选项时，它需要前面的空格。为什么会这样？

以下是示例：-

复选框：http://jsbin.com/fehonoho/1/edit?html,js,console

选择： http://jsbin.com/yasotuli/1/edit?html,js,console

来自选择器规范：

例如，伪类:checked最初适用于具有HTML4 selected和checked属性的元素，如HTML4第17.2.1节所述，但当然用户可以切换"关闭"这些元素，在这种情况下，伪类:checked将不再适用。

:checked选择器前面的空间只不过是一个后代组合子，因此您拥有的选择器正在查找:checked的选择的后代，而不是选择本身。这些后代是其选项元素。

selected 属性位于选项元素中，而不是其父选择中。换句话说，选择永远无法与:checked选择器匹配;只有它的选择可以。这就是为什么您需要一个后代（或子）组合器才能使其工作，这与复选框和单选按钮不同。

为了更清楚地说明这一点，强烈建议您使用类型选择器限定:checked选择器（否则暗示通用选择器）：

document.querySelectorAll('[name="aname"] option:checked')

与选择元素的属性选择器类似：

document.querySelectorAll('select[name="aname"] option:checked')

因为:checked元素是<option>而不是<select>所以你需要option:checked或select :checked后者有一个后代组合器。

演示

你误解了这个问题。这两个选择器的工作方式如下：

input[name="gender"]:checked

是一个简单的选择器。它选择具有属性 name=gender 的 input 元素，并且:checked 。

[name="aname"] :checked

是由后代组合器分隔的两个简单选择器。它选择属性为 [name=aname] 的元素的所有:checked子元素/孙元素。

请注意，option元素应使用 :selected 进行测试。

相关文章：