为什么 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 {} 不同，我是否/如何制作自己的魔法对象？

Answer 1

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