理解querySelector & querySelectorAll 的控制台输出

Question

谁/什么决定如何将对象的内容写入控制台？

有时，您会得到对象文字的可折叠表示，而有时它只是打印 DOM 结构。

给定这个 HTML：

<div class="container">
  <video src="low.mp4"></video>
  <video src="high.mp4"></video>
  <video src="mega.mp4"></video>
</div>

如果我们使用以下命令点击 console (WebKit/Firebug) 然后

> var firstVideo = document.querySelector('video')

：

> firstVideo

它返回：

<video src=​"low.mp4">​</video>​

同时，假设我们有另一个对象，例如：

var guitar = { name:'Stratocaster', strings:6 }

向控制台询问：

> guitar

给我们：

我已经多次遇到这种行为，但通常会通过其他方式回避我的好奇心。现在这有点痛苦，所以我正在进一步研究它。仅仅是因为所讨论的对象是一个 DOM 元素，而检查器只是在帮助我们吗？

（我意识到我的示例有点奇怪（比较 DOM 对象和文字），但这是说明问题的最简单/最快的方法。）

使用上一个问题中的一些信息，我可以得到关于每个有问题的对象的更多信息：

video.constructor返回：

HTMLVideoElementConstructor 

而：guitar.constructor返回：

function Object() {
  [native code]
} 

为什么它很重要？

情况如下：

> firstVideo.parentElement

我无法查看该元素当我必须单独处理每个属性时（即，firstVideo.parentElement.offsetHeight），这真是太糟糕了。

那么，我的理解差距在哪里——实际上到底发生了什么？

Answer 1

如果结果是 DOM 元素，控制台会以不同的方式记录。它们输出元素的源 HTML（或 XML），而不是列出其属性。
- querySelector 返回一个 DOM 元素，因此控制台显示该元素的来源。
- querySelectorAll 返回一个 DOM 元素数组，它应该正常显示一个数组。

您始终可以使用 dir(object) 强制输出列表对象的属性。

您可以查看 Firebug 命令行 API。

Answer 2

当您将 dom 节点（这就是您的情况，因为 querySelector 返回一个元素）记录到控制台时，您会得到它的字符串表示形式，因为它更清晰，并且它使您可以访问一些标准功能，例如如果您悬停日志消息或获取其如果您单击它，则将其定位到文档中。如果您想像其他对象一样记录 dom 节点以检查其属性，您可以使用console.dir(node)。

在另一种情况下，当您记录简单对象的构造函数和 dom 节点的构造函数时，结果是相同的（至少在 Firebug 中），因为您正在记录函数并且控制台打印其名称，即 HTMLVideoElementConstructor 用于视频元素，Object 用于简单对象。