了解querySelector和querySelectorAll的控制台输出

Question

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

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

考虑以下HTML：

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

如果我们在控制台（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），就不能像简单地查看此元素并检查其属性那样操作，这真是令人沮丧。

那么，我的理解上哪里出了问题--实际上发生了什么？

- tksb

Answer 1

如果返回结果是DOM元素，则控制台以不同的方式记录日志。 它们输出元素的源HTML（或XML），而不是列出其属性。
- querySelector 返回一个DOM元素，因此控制台显示该元素的源代码。
- querySelectorAll 返回一个DOM元素数组，应该像普通数组一样显示。
您始终可以使用dir(object)强制输出对象的属性列表。

您可以查看Firebug命令行API。

- Digital Plane

---

谢谢！值得注意的是，苹果公司已经在这里记录了 WebKit 控制台 API（http://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html）。 - tksb

Answer 2

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

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

- mck89

---

谢谢！我明白我要求 console 打印什么，只是不知道如何强制转换它。 - tksb