为何Chrome控制台中document.querySelector()输出内容不一致？

核心结论 #

两种控制台输出对应的都是同一个Element对象，document.querySelector()返回的始终是Element类型实例（匹配不到时返回null），差异只是Chrome控制台的展示逻辑不同。

为什么会有两种显示形式 #

• HTML标签形式的输出：这是Chrome对未被代码修改的原始DOM元素的预览模式。当你第一次打印productList时，这个元素还没有被后续的循环操作（比如添加子产品元素）修改，控制台会直接渲染它的HTML结构，帮你快速查看元素的初始状态。
• 属性列表形式的输出：刷新页面后，要么是你的循环已经完成了对productList的修改（比如往里面添加了.product子元素），要么是控制台的展示逻辑切换了——Chrome会根据元素是否被修改、是否被展开过，自动切换为展示Element对象的详细属性列表，方便你查看元素的DOM API属性和状态。

补充说明 #

你在allProducts.forEach循环里重复调用document.querySelector('.product-list')，每次获取的都是同一个DOM元素。如果循环里有向该元素添加内容的代码，那么后续的console.log会输出已经被修改后的元素，控制台就会切换为属性列表的展示方式；而第一次执行时元素还未被修改，所以显示HTML结构。

内容的提问来源于stack exchange，提问作者RHEE