为什么HTMLCollection中的元素与HTMLCollection.item（）在Chrome中返回的元素不同

Question

如果标题让你感到困惑，我道歉。让我解释一下。

在Chrome开发工具中，如果我使用，例如：

document.getElementsByClassName("login")

我得到一个HTMLCollection，你可以看到0-indexd属性代表一个典型的Element对象。

但是，如果我使用

document.getElementsByClassName("login").item(0);

我有这样的事情：

正如您所看到的，这不是元素对象。相反，它是HTML Div element（如果我错误地命名，请更正我。）

我的问题是为什么item（）方法不会在HTMLCollection中返回相同的对象？根据我的理解，HTMLCollection是一个对象，从item（）方法检索的是对象的属性，因此它们应该是相同的。为什么结果出乎意料？

谢谢！

Answer 1

这只是Chrome控制台在＆＃34;漂亮的＆＃34;格式化对象。方式：

  

默认情况下，DOM元素作为HTML

的表示形式登录到控制台

（来自https://developers.google.com/web/tools/chrome-devtools/console/console-write#formatting_dom_elements_as_javascript_objects）

如果要查看实际对象，可以使用以下命令获取它的JavaScript表示：

console.dir(document.getElementsByClassName("login").item(0))

（您可以选择放弃console.）

有关可用的各种控制台功能的信息，请参阅：https://developers.google.com/web/tools/chrome-devtools/console/console-reference。

Answer 2

他们不是完全相同的。 HTMLCollection可以包含多个objects，可以迭代。

这是ecma6 standard的新野兽。据我所知，它支持Firefox 50，因此不超过2年。

使用它有优点（简单，速度）但旧浏览器不支持它。只有最新更新版本的Internet Explorer才能处理它。

HTMLCollection让我们使用更多的魔法：keys()，values()，entries()和漂亮的forEach()。

检查此快速摘要，揭示一些差异。

querySelector检索对象。 Sorthand： $（“＃hello”）

querySelectorAll检索 HTMLCollection 。 Sorthand： $$（“＃hello”）

console.log(document.querySelectorAll("#hello"))

console.log("----------")

console.log(document.querySelectorAll("#hello").innerText)

console.log("----------")

console.log(document.querySelector("#hello").innerText)

console.log("----------")

document.querySelectorAll("#hello").forEach(function(e){
    console.log( e.innerText )
})

<div id="hello">

  <span>hello</span>

  <span>world</span>

</div>