javascript - 为什么所选的 <option> css 查询为 :checked, 但 HTML 和 Javascript 正在使用所选内容？

Question

您可以从<select>中获取所选选项但如果你有<select multiple>并且您需要使用所选选项动态执行某些操作。

您可以查询选择 :checked 或者您可以选择所有选项并过滤 .selected

有人可以解释一下这种不一致吗？

function run() {
  let optionChecked;
  let optionSelected;
  try {
    optionChecked = document.querySelector("option:checked");
  } catch (e) {}

  try {
    optionSelected = document.querySelector("option:selected");
  } catch (e) {}

  console.log('selector: option:checked: ', optionChecked) // chosen option
  console.log('selector: option:selected: ', optionSelected) // undefined

  console.log('js-property: option.checked: ', optionChecked.checked) // undefined
  console.log('js-property: option.selected: ', optionChecked.selected) // true

}

/*
* never used.
*/

option:selected {
  color: brown;
}


/*
* Even tho not supported - when inspecting the element, we see the css-selector match
*/

option:checked {
  color: hotpink;
}

<h2>Example</h2>
<select name="" id="select1">
  <option value="a">a</option>
  <!-- Invalid -->
  <option value="b" checked>b</option>
   <!-- Valid -->
  <option value="c" selected>c</option>
  <option value="d">d</option>
</select>

<button onclick="run()">run</button>

Answer 1

根据early drafts of Selectors 3 ， :checked 第一次被提议为 :selected 大约是在 2000 年。然而，草案的修订实际上没有包含 :selected 的定义，所以我在将草稿输入为 :checked 之前，只能猜测它是被提议的 :selected。

由于它被指定应用于 HTML 中的 checked 和 selected 属性(大概是因为它们在表单中具有相同的用途)，因此不需要有两个伪类具有相同的含义。另外，目标是将选择器与 HTML 解耦，因此为该伪类指定一个唯一的名称是理想的选择。无论出于何种原因，在决定如何命名这个伪类时，规范的作者选择了 :checked。我浏览了 1999 年至 2000 年的 www 式邮件列表文件，遗憾的是找不到任何公开讨论此决定的内容。

.checked 和 .selected DOM 属性只是反射(reflect)了它们的 HTML 属性名称，与选择器中的任何内容都无关。这就是为什么您会发现 .checked 属性仅出现在 HTMLInputElement 中。 ;和 .selected，仅在 HTMLOptionElement 中.

jQuery 包含一个 :selected 伪类，它基本上是 :checked 的 JavaScript 重新实现，仅适用于 option 元素。 Make of that what you will ，但我建议忽略它。我只是将其作为琐事提及。