Question

在调试验证例程的过程中，我遇到了Element.querySelector这种奇怪的行为，我将一个选择器传递给它，它应该定位select元素并返回，而不仅仅是一个，而是每个 option元素是目标select的子元素。

示例：

(() => {
  const handlerWeird = (e) => {
    const select = Array.from(document.querySelector('#i-am-a-select'));
    console.log(select);
  };
  const handlerNormal = (e) => {
    const select = Array.from(document.querySelectorAll('#i-am-a-select'));
    console.log(select);
  };
  document.getElementById('weirdness').addEventListener('click', handlerWeird, false);
  document.getElementById('normalness').addEventListener('click', handlerNormal, false);
})();

<select id="i-am-a-select">
      <option value="weird">weird</option>
      <option value="doubly-so">doubly so</option>
    </select>
    <button id="weirdness">Weirdness</button>
    <button id="normalness">Expected</button>

切换到Element.querySelectorAll（并过滤生成的节点列表）会返回我需要的select元素，所以当我的具体问题得到修复时，问题仍然是为什么这样做行为发生并假设它记录在任何地方，哪里被记录？

在Chrome（v 65.0.3325.181）和FireFox Quantum（v 58.0.2）中测试过。

Answer 1

这是因为document.querySelector('#i-am-a-select')正在返回一个HTMLSelectElement。

Array.from()将从类似数组的对象或可迭代对象创建数组。

HTMLSelectElement是一个类似于数组的对象，其中每个项都是元素内的一个选项。

见这个例子：

＆＃13;

const selectElement = document.querySelector('#i-am-a-select');
console.log('First option: ', selectElement[0]);
const select = Array.from(selectElement);
console.log(select);

＆＃13;

<select id="i-am-a-select">
    <option value="weird">weird</option>
    <option value="doubly-so">doubly so</option>
</select>

＆＃13;

因此，由于此元素是一个类似于数组的对象＆＃34;，Array.from()将返回一个包含其选项的数组。

小心：

即使您可以通过HTMLSelectElement项运行，但它并不意味着此元素是一个数组。要从中创建数组，您将使用Array.from()。

见另一个例子：

＆＃13;

const selectElement = document.querySelector('#i-am-a-select');
selectElement.forEach(function(){ //will throw an Error
  console.log(this);
});

＆＃13;

<select id="i-am-a-select">
    <option value="weird">weird</option>
    <option value="doubly-so">doubly so</option>
</select>

＆＃13;

Answer 2

您选择了select元素：

https://dev.w3.org/html5/spec-preview/the-select-element.html

选择[指数]

从选项列表中返回索引为索引的项目。这些项目按树顺序排序。

这与querySelector无关，也与Array.from无关 - 这完全归功于select元素本身的行为。 someSelectElement[i]将返回i选项。将元素转换为普通数组，并且...同样的事情发生，someSelectElement[i]将返回i选项

const select = document.querySelector('select');
console.log(select[0]);
console.log(select[1]);

<select>
<option>1</option>
<option>2</option>
</select>

我在哪里可以找到`Element.querySelector`的这种奇怪行为的文档

2 个答案: