Element.querySelector异常行为咨询：选中select却返回其全部option子元素

这其实不是Element.querySelector的异常行为哦，而是你对Array.from()的工作机制和HTMLSelectElement的特性不太熟悉导致的~

核心原因拆解 #

• querySelector的返回值是正常的：document.querySelector('#i-am-a-select')确实精准返回了匹配的单个<select>元素，你可以直接打印这个结果验证——它会输出对应的select节点，而非option集合。
• 问题出在Array.from()和HTMLSelectElement的可迭代特性：HTMLSelectElement对象本身实现了可迭代接口（Iterable），它的默认迭代器会自动遍历自身包含的所有<option>子元素。当你把这个可迭代的select对象传给Array.from()时，方法会按照迭代器的规则，把所有遍历到的option元素组装成数组返回。
• 对比querySelectorAll的差异：document.querySelectorAll('#i-am-a-select')返回的是NodeList对象，它的迭代器是遍历自身包含的DOM节点（这里就是单个select），所以Array.from()处理后得到的是包含目标select的数组，这和你预期的一致。

正确的写法 #

如果你想把单个select元素包装成数组，不需要用Array.from()，直接创建数组即可：

const select = document.querySelector('#i-am-a-select') ? [document.querySelector('#i-am-a-select')] : [];
console.log(select);

内容的提问来源于stack exchange，提问作者pete