了解querySelector＆amp; querySelectorAll的控制台输出

Question

谁/什么决定如何将object的内容写入console？

有时你会获得对象文字的可折叠表示，而有时它只是打印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 

while：guitar.constructor返回：

function Object() {
  [native code]
} 

为什么重要？

情况如：

> firstVideo.parentElement

我不能看这个元素并检查它的属性就像我必须单独追逐每个元素（即firstVideo.parentElement.offsetHeight），这是一个完全无赖。

那么，我理解的差距在哪里 - 实际正在进行什么？

Answer 1

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

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

您可以查看Firebug Command Line API。

Answer 2

当你将一个dom节点（这是因为querySelector返回一个元素而你的情况）记录到控制台时，你会得到它的字符串表示，因为它更清晰，它可以让你访问一些标准功能，比如在你悬停日志消息时突出显示节点如果单击它，请将其位置放入文档中。如果要像所有其他对象一样记录dom节点以检查其属性，可以使用console.dir(node)。

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