为何for循环首次迭代时console.log提前显示元素的innerHTML内容？

在以下代码的for循环首次迭代时，console.log(d1)语句先于d1.innerHTML赋值语句执行，但控制台却打印出了已设置innerHTML后的<div>元素内容，这不符合代码执行顺序的预期，原因是什么？

相关代码 #

JavaScript

let array1 = '{"https://create-react-app.dev/docs/getting-started":"React Start",\
"https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#using_addeventlistener":"Event listeners"\
}';

const obj121 = JSON.parse(array1);

for (let key in obj121) {
  d1 = document.createElement('div');
  d1.setAttribute('id', obj121[key]);
  console.log(d1);
  d1.innerHTML = `<a href=${key}>${obj121[key]}</a>`;
  document.querySelector('.my_flexx').append(d1);
}

CSS

.my_flexx {
  display: flex;
  background-color: lightgrey;
  justify-content: space-evenly;
}

HTML

<h1 class="my_flexx"></h1>

原因解析 #

这是因为浏览器控制台打印DOM元素时，采用的是引用式展示，而非执行console.log那一刻的快照。

当你执行console.log(d1)时，控制台只是记录了这个DOM对象的引用，并没有立刻把当时的元素内容完全渲染出来。等你后续展开控制台里的这个DOM元素时，浏览器才会去读取该对象的最新状态——此时d1.innerHTML已经完成赋值，所以你看到的是修改后的结果。

如果想要查看console.log执行瞬间的元素状态，可以改成打印元素的HTML字符串快照，比如：

console.log(d1.outerHTML);

这样就能输出执行那一刻的元素HTML内容，不会受后续修改影响。

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