为什么将选择元素转换为数组会返回子元素数组？答案

【问题标题】：Why does converting a select element to an array return an array of children elements?为什么将选择元素转换为数组会返回子元素数组？
【发布时间】：2016-07-20 00:00:05
【问题描述】：

当我从页面中选择一些元素时不小心使用了querySelector 而不是querySelectorAll，我发现了一些有趣的东西。我通常在查询后直接将静态节点列表转换为数组。但由于querySelector 只返回它找到的第一个匹配节点，而不是NodeList，我的脚本试图将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>

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

这主要是一个历史性的兼容性问题。 HTMLSelectElement 有两个关键的东西需要类数组：

一个length
索引式访问

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

上面链接中的关键引号是：

options 集合也反映在 HTMLSelectElement 对象上。任何时刻支持的属性索引都是由options 属性在该时刻返回的对象支持的索引。

和

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

【讨论】：

关于如何将其转换为第一个也是唯一元素是选择的数组的任何建议？
@Whip - 恐怕我不明白这个问题。
nvm 我想通了[].push(selectParent)
@Whip - 或者更直接地说，[selectParent]。