为何console.log对同一HTML元素显示不同内容？如何统一显示格式？

问题现象 #

浏览器控制台打印同一DOM元素时会出现两种不同展示形式：一种是展开的对象形式（可查看元素所有属性与方法），另一种是元素预览形式（可直观看到DOM结构）。如以下代码，首次打印是对象形式，图片加载完成后的第二次打印则是元素预览形式，该问题在原生JavaScript和TypeScript中均存在。

const myImage = document.getElementById('myImage')! as HTMLImageElement;
console.log('first log: ', myImage)

myImage.addEventListener('load',() =>{
    console.log('second log:', myImage)
})

需求 #

希望能统一控制台打印的展示形式：要么全部以对象形式显示（方便开发时查看元素的属性与方法），要么全部以元素预览形式显示。

解决方案 #

统一以对象形式打印

• 使用console.dir()替代console.log()：console.dir()是专门用于打印对象详细属性与方法的API，无论何时调用，都会以展开的对象形式展示DOM元素，完全满足查看属性方法的需求。
  修改后代码示例：

  const myImage = document.getElementById('myImage')! as HTMLImageElement;
  console.dir('first log: ', myImage)
  
  myImage.addEventListener('load',() =>{
      console.dir('second log:', myImage)
  })
  

• 转为普通对象打印：通过Object.assign({}, myImage)将DOM元素的可枚举属性拷贝到新对象中打印，但这种方式会丢失原型链上的方法，仅适合查看元素自身的属性。

统一以元素预览形式打印

• 克隆元素节点打印：调用myImage.cloneNode(false)创建元素的副本，控制台会以元素预览形式展示这个副本，和加载完成后的打印效果一致。
  修改后代码示例：

  const myImage = document.getElementById('myImage')! as HTMLImageElement;
  console.log('first log: ', myImage.cloneNode(false))
  
  myImage.addEventListener('load',() =>{
      console.log('second log:', myImage)
  })
  

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