當我使用Chrome開發工具控制臺.log一個元素時，它會以兩種不同的格式列印。當我重繪 瀏覽器時，它會在這兩種格式之間隨機切換。
<h1 class=" heading">Heading< /h1>
<script>。
console.log(document.querySelector(" . heading") ）。)
</script>
期望的格式。https://i.stack.imgur.com/XV7fB.png
為什么會發生這種情況？https://i.stack.imgur.com/YlEGQ.png
最后包裝了日志函式：
function log(value) {
window.addEventListener("load", function () {
console.log（value）。
});
}
uj5u.com熱心網友回復：
不知何故，你的瀏覽器將console.log()與console.dir()混淆。請閱讀有關區別這里。
兩種情況下我在機器上得到的輸出結果 -
> console. log(document.querySelector(". heading") )。
<h1 class=" heading"> 標題</h1>
> console. dir(document.querySelector(". heading"))。
h1.標題。
uj5u.com熱心網友回復：
我能夠在Windows 10上使用Chrome v93重現這一結果。
DOM 元素的 "所需格式 "應該來自 console.log，而 JSON 型別的輸出應該來自 console.dir。
我發現將運算式包裹在DOMContentLoaded或onload函式中似乎可以改善結果，但有時仍會顯示完整的物件而不是預期的DOM元素。
window.onload = function（） {
console.log(document.querySelector(" . heading">) 。)
};
我懷疑這是Chrome瀏覽器的一個錯誤。我無法在 Firefox 或 Edge 中復制這種行為。
我對這里發生的事情的最佳猜測是，Chrome 試圖在 DOM 完全加載之前記錄該元素。
這也可以在一定程度上幫助解釋：
這也可以幫助解釋：
請注意，如果您在最新版本的 Chrome 和 Firefox 中記錄物件，您在控制臺中得到的是對該物件的參考，這并不一定是您呼叫 console.log() 時該物件的 "值"，但它是您打開控制臺時該物件的值。
https://developer.mozilla.org/en-US/docs/Web/API/Console/log
當我看到控制臺中出現完整的物件（不希望出現的格式）時，我發現關閉 DevTools 并重新打開，不重繪 頁面，似乎可以使其顯示正確的結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311298.html
標籤：