5

谁/什么决定如何将 an 的内容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">​&lt;/video>​

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

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

向控制台询问：

> guitar

给我们：

控制台输出

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

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

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

video.constructor返回：

HTMLVideoElementConstructor

而：guitar.constructor返回：

function Object() {
  [native code]
}

为什么这有关系？

像这样的情况：

> firstVideo.parentElement

当我必须单独跟踪每个元素（即firstVideo.parentElement.offsetHeight）时，我不能简单地查看这个元素并检查它的属性，这真是太糟糕了。

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

4

2 回答 2

6

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

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

您可以查看Firebug 命令行 API。

于 2011-07-27T14:31:51.687 回答
2

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

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

于 2011-07-27T14:31:19.180 回答