使用Array.from时querySelector与getElementsByClassName输出不同的原因

差异本质是两个DOM查询API的返回值类型完全不同，结合Array.from的转换规则，最终产生了完全不同的输出。

• document.querySelector('.button')的返回逻辑与转换结果
  这个API的设计目标是返回匹配传入CSS选择器的第一个DOM元素，如果页面没有匹配项则返回null。它的返回值是单个Element节点，不是多元素集合：单个DOM元素既没有类数组结构要求的数值索引、length属性，也没有部署可迭代接口。
  你得到空数组，说明页面确实存在匹配.button的元素，querySelector成功返回了第一个匹配的按钮元素。但把单个元素传入Array.from时，方法读取入参的length属性得到undefined，会默认按长度为0的对象处理，最终生成空数组。如果querySelector没有匹配到元素返回null，直接传入Array.from会抛出类型错误，不会返回空数组。

• document.getElementsByClassName('button')的返回逻辑与转换结果
  这个API返回的是实时更新的HTMLCollection集合，属于标准的类数组结构：自带数值索引和length属性，有序存储了页面上所有携带button类名的DOM元素，完全符合Array.from的转换要求，因此可以正确把集合中的20个DOM元素转为真正的数组，也就是你看到的包含20个按钮元素的输出。

补充：如果要通过CSS选择器获取所有匹配的元素集合，应该使用document.querySelectorAll('.button')，它返回静态的NodeList集合，同样可以被Array.from正常转换为元素数组。querySelector返回的单个元素本身不是集合，不需要套Array.from转换。

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