瞭解querySelector＆querySelectorAll的控制檯輸出

誰/什麼決定如何將object的內容寫入console？瞭解querySelector＆querySelectorAll的控制檯輸出

有時你會得到對象文字的可摺疊表示，而其他時候它只是打印DOM結構。

鑑於此HTML：

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

如果我們打的console（WebKit的/螢火蟲）與：

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

然後：

> firstVideo

它返回：

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

雖然說我們已經有了像另一個對象：

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

問計於控制檯：

> guitar

給我們：

console output

我碰到這種行爲多次，但通常通過其他方式使我的好奇心旁觀。現在這是一種痛苦，所以我正在進一步研究它。這是否僅僅是因爲中的對象是和DOM元素，檢查員只是幫助我們？

（我知道我的例子是一個有點奇怪（比較一個DOM對象和文字），但它是說明問題的最簡單/最快捷的方法。）

從以前的問題，我能得到使用一些信息問題有關每個對象多一點信息：

video.constructor回報：

HTMLVideoElementConstructor

雖然：guitar.constructor回報：

function Object() { 
    [native code] 
}

爲什麼重要？

情況等：

> firstVideo.parentElement

我不能看這個元素，並檢查其屬性，簡單地，當我有單獨每一個（即，firstVideo.parentElement.offsetHeight），這是一個總長號後去。

那麼，我的理解在哪裏呢？究竟是呢？

來源

2011-07-27 tksb

如果結果是DOM元素，則控制檯記錄的內容不同。它們輸出元素的源HTML（或XML），而不是列出其屬性。
- querySelector返回一個DOM元素，所以控制檯顯示元素的來源。
- querySelectorAll返回一個DOM元素數組，它應該正常顯示一個數組。

通過使用dir(object)，您可以始終強制輸出列表中的對象的屬性。您可以查看Firebug Command Line API。

來源

2011-07-27 14:31:51

謝謝！值得注意的是，Apple的WebKit控制檯API記錄在這裏（http://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html）。 – tksb

當你將一個dom節點（這是你的情況，因爲querySelector返回一個元素）登錄到控制檯時，你會得到它的字符串表示，因爲它更清晰，並且它使你能夠訪問一些標準的功能，比如如果你將日誌懸停消息或如果您單擊它的位置到文檔中。如果您想像其他任何對象一樣記錄dom節點以檢查其屬性，則可以使用console.dir(node)。

在另一種情況下，當你記錄一個簡單對象的構造函數和一個dom節點的構造函數時，結果是相同的（至少在Firebug中），因爲你正在記錄一個函數並且控制檯打印它的名字，用於視頻元素的HTMLVideoElementConstructor以及用於簡單對象的Object。

來源

2011-07-27 14:31:19 mck89

謝謝！我明白了 - 我要求'console'打印，而不是強迫它。 – tksb

瞭解querySelector＆querySelectorAll的控制檯輸出

回答

相關問題