为何通过id与class选中同一HTML元素时，控制台输出存在差异？

这个差异和选中的是不是同一个按钮没有关系，本质是两类选择器的返回值类型完全不同，触发了浏览器控制台的不同渲染规则：

• 基于元素ID选中元素时，返回值永远是单个独立的DOM元素对象。控制台打印这类原生对象时，默认渲染为可交互的元素节点视图，不会直接展示原始HTML字符串
• 基于类名选中元素时，返回值始终是类数组结构的元素集合（原生环境下是HTMLCollection/NodeList，jQuery环境下是包装的jQuery对象集合）。哪怕页面上只有1个元素匹配该类名，返回值的容器结构依然是集合，控制台打印这类集合对象时，会直接把集合内包含元素的原始HTML代码渲染出来

为什么会产生“选了同一个元素”的错觉 #

很多人遇到这个问题时，会下意识觉得自己用两个选择器拿到了完全一样的元素——本质是你当前的页面里，这个类名只匹配到了1个元素，集合长度为1，让你忽略了返回值本身的结构差异。
毕竟id选择器的逻辑是全页面唯一匹配，直接返回单个节点；类选择器的逻辑是匹配所有带这个类名的元素，哪怕匹配数为1，返回的也是装着这个元素的集合容器，不是元素本身。

常见踩坑与修复方法 #

两种选择器的使用差异会体现在原生JS和jQuery两种场景里：

• 原生JS场景下：document.getElementById('greenBtn') 拿到的是单个DOM节点，和你看到的id选中时的正常表现一致；document.getElementsByClassName('green-btn') 拿到的是元素集合，直接打印就会看到控制台输出拼接好的HTML代码
• jQuery场景下：$('#greenBtn') 拿到的是单元素的jQuery包装对象，输出表现和原生DOM节点一致；$('.green-btn') 拿到的是多元素集合，哪怕集合内只有1个匹配项，打印出来的内容也会带着集合的特征，直接展示内部元素的HTML

你可以通过两个简单的打印验证结构差异：

• 打印ID选择器返回值的类型：console.log(Object.prototype.toString.call(document.getElementById('testBtn')))，输出为[object HTMLButtonElement]，是单个元素类型
• 打印类选择器返回值的类型：console.log(Object.prototype.toString.call(document.getElementsByClassName('green-btn')))，输出为[object HTMLCollection]，是集合类型

如果想让类选择器的使用效果和ID选择器完全一致，只需要从集合中取出对应的单个DOM节点即可：

• 原生写法：document.getElementsByClassName('green-btn')[0]
• jQuery写法：$('.green-btn').get(0)

拿到的节点和ID选择器返回的对象类型完全一致，绑定淡入淡出动画的逻辑也会和ID选择器的表现完全相同。

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