Javascript 了解查询选择器&；querySelectorAll'；s控制台输出

谁/什么决定如何将

对象的内容写入
控制台
？

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

鉴于此HTML：

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

然后：

> firstVideo

它返回：

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

向控制台询问：

> guitar

给了我们：


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

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

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

video.constructor
返回：

HTMLVideoElementConstructor 

function Object() {
  [native code]
} 

While:
guist.constructor
返回：

HTMLVideoElementConstructor 

function Object() {
  [native code]
} 

为什么这很重要？

情况如下：

> firstVideo.parentElement

当我必须单独查找每个元素时（例如，
firstVideo.parentElement.offsetHeight
），我无法简单地查看该元素并检查其属性，这是一个非常糟糕的问题

那么，我的理解差距在哪里——实际发生了什么？
当您记录dom节点时（这是您的情况，因为querySelector返回一个元素）在控制台中，您可以看到它的字符串表示形式，因为它更清晰，并且可以让您访问一些标准功能，如在悬停日志消息时突出显示节点，或者在单击它时在文档中获取其位置。如果要像其他对象一样记录dom节点以检查其属性，可以使用
console.dir（node）

在另一种情况下，当您记录一个简单对象的构造函数和一个dom节点的构造函数时，结果是相同的（至少在Firebug中），因为您正在记录一个函数，并且控制台打印它的名称，这就是视频元素的
HTMLVideoElementConstructor
，简单对象的
Object
。
如果结果是DOM元素，控制台的日志会有所不同。它们输出元素的源HTML（或XML），而不是列出其属性。

-
querySelector
返回一个DOM元素，因此控制台显示该元素的源。

-
querySelectorAll
返回一个DOM元素数组，该数组应显示为普通数组

通过使用
dir（object）
，始终可以强制输出对象的属性列表

您可以查看。
谢谢！值得注意的是，苹果已经有了WebKit控制台API文档。谢谢！我理解我要求
控制台打印的内容，而不是如何强制打印。