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

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>

- KevBot

Answer 1

这主要是出于历史兼容性的考虑。HTMLSelectElement有两个关键特点，使其成为类似数组的对象：

• length属性
• 索引式访问

这两个特性与元素的相关： length属性是下拉框中元素的数量，[0]、[1]等访问这些元素。上面链接中的关键引用如下： options集合也在 HTMLSelectElement 对象上进行了镜像。任何时候支持的属性索引都是 options 属性在该时刻返回的对象支持的索引。 以及 length IDL属性必须返回由 options 集合表示的节点数...

- T.J. Crowder

---

有什么建议可以将它转换为一个数组，其中第一个且唯一的元素是选择项？ - Whip

@Whip - 很抱歉，我不理解这个问题。 - T.J. Crowder

没事了，我已经想通了 [].push(selectParent)。 - Whip

@Whip - 或者更直接地说，[selectParent]。 - T.J. Crowder