时间戳

首页 > 解决方案 > 在 Javascript 控制台中，当 console.log(a variable) 如果重新加载页面会更改它显示的信息

javascript - 在 Javascript 控制台中，当 console.log(a variable) 如果重新加载页面会更改它显示的信息

问题描述

我有这个代码

<div class="buttons">
    <button>Press 1</button>
    <button>Press 2</button>
    <button>Press 3</button>
</div>
<script>
    const buttonContainer = document.querySelector('.buttons');
    console.log('buttonContainer', buttonContainer);
  
    buttonContainer.addEventListener('click', event => {
        console.log(event.target);
    })
</script>

第一次打开控制台时，显示如下： （箭头）div.buttons

在那里我可以看到变量的属性和方法。

重新加载页面时，它会更改为： <div 类：

任何人都可以向我解释为什么会发生这种情况？以及如何在其中两个选项之间切换，我认为在需要时查看变量的属性和方法列表非常有帮助。

谢谢 ：）

标签： javascriptvariablesconsole

解决方案

这是因为该脚本是在解析页面的同时下载的，并且渲染树可能还没有被解析。要解决此问题，请将defer道具添加到您的脚本中。那应该使它在解析后执行。

推荐阅读