Question

当我从页面中选择一些元素时，我意外地使用querySelector而不是querySelectorAll时发现了一些有趣的内容。我通常在查询后直接将静态节点列表转换为数组。但由于querySelector只返回它找到的第一个匹配节点，而不是NodeList，我的脚本试图将select节点转换为数组。它返回了select元素的子元素，而不是返回一个空数组。

为什么将select元素转换为数组会返回子节点？这不适用于div等其他元素：

var selectParent = document.querySelector('.selectParent');
var selectArray = Array.from(selectParent);
console.log(selectArray);

var divParent = document.querySelector('.divParent');
var divArray = Array.from(divParent);
console.log(divArray);

<select class="selectParent">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<div class="divParent">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

Answer 1

这主要是历史性的兼容性。 HTMLSelectElement有两个关键的事情需要 array-like ：

A Presenters
索引式访问

...这两件事与其选项有关：length是框中length个元素的数量，option，[0]等。那些[1]元素。

以上链接的主要引用是：

option对象上也会镜像options集合。任何时刻支持的属性索引都是当时HTMLSelectElement属性返回的对象支持的索引。

和

options IDL属性必须返回length集合所代表的节点数...

为什么将select元素转换为数组会返回子元素数组？

1 个答案: