为什么HTMLCollection中的元素与HTMLCollection.item()返回的内容不同

Question

如果这个头衔让你困惑了，我很抱歉。让我解释一下。

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

document.getElementsByClassName("login")

我得到一个HTMLCollection，如您所见，0-indexd属性表示一个典型的元素对象。

​

​

但是，如果我使用

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

我有这样的东西：

​

如您所见，这不是一个元素对象。相反，它是一个HTML Div元素(如果我不正确地命名它，请更正我)。

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

谢谢!

Answer 1

这只是Chrome控制台以“漂亮”的方式格式化对象：

默认情况下，DOM元素作为HTML的表示登录到控制台

(来自对象)

如果要查看实际对象，可以使用以下方法获得它的JavaScript表示：

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

(您可以随意删除console.)

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