为什么DOM对象在控制台中的显示方式与一般Javascript对象不同？

Question

例如：

> var a = document.getElementById('mybutton')
  undefined
> a
  <input type=​"button" id=​"mybutton" class=​"button" value=​"My Button">​
> typeof a
  "object"
> Object.getPrototypeOf(a)
  HTMLInputElement {}
> console.dir(a)
  input#mybutton.button

问题是为什么console.log和console.dir会输出与典型的Class {}不同的东西，以及if /怎么能创建自己的魔法对象？

Answer 1

我认为控制台（已经创建在Web浏览器中工作）具有特殊的逻辑编码，使得使用DOM元素并与IDE的其他部分（例如Web检查器）集成更加愉快）。这样，DOM对象本身并没有什么特别之处，它可能不是你可以挂钩的东西，至少不是以便携式（跨浏览器）方式。