Chrome中HTMLCollection元素与item()返回值存在差异的原因

嗨，我来帮你理清这个困惑～其实这里并没有真正的差异，只是你对Chrome DevTools显示的对象类型理解有偏差而已，具体拆解如下：

• 本质上是同一个对象：document.getElementsByClassName("login")返回的HTMLCollection里的元素，本身就是对应HTML标签的具体实例对象（比如你的例子里是<div>，所以是HTMLDivElement）。而Element是所有HTML元素对象的父类，HTMLDivElement是Element的子类——也就是说，HTMLDivElement本身就属于Element类型的范畴。

• 索引访问和item()方法完全等价：HTMLCollection的item(index)方法和直接使用[index]索引访问，返回的是同一个对象。你可以在控制台里做个验证：

  const loginElements = document.getElementsByClassName("login");
  console.log(loginElements[0] === loginElements.item(0)); // 会输出true
  

• DevTools显示的是具体类型：Chrome开发者工具在展示对象时，会优先显示对象的具体构造函数类型，而不是父类类型。比如<div>元素的构造函数是HTMLDivElement，所以控制台会展示这个更具体的名称，但你可以用instanceof验证它确实是Element的实例：

  const el = loginElements[0];
  console.log(el instanceof Element); // true
  console.log(el instanceof HTMLDivElement); // true
  

简单来说，你看到的“标准Element对象”和“HTML Div元素”其实是同一个东西，只是DevTools展示的粒度不同而已～

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