为啥 DOM 对象在控制台中的显示与一般 Javascript 对象不同？

Posted 2023-03-05

【中文标题】为啥 DOM 对象在控制台中的显示与一般 Javascript 对象不同？

【英文标题】：How come DOM objects display differently in console than general Javascript objects?为什么 DOM 对象在控制台中的显示与一般 Javascript 对象不同？

【发布时间】：2016-01-22 10:11:54

【问题描述】：

例如：

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

【参考方案1】：

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

【讨论】：

我认为有办法解决这个问题，因为 jQuery 对象专门显示在控制台中。

@Barmar：你有这方面的例子吗？

在一个使用 jQuery 的网页上打开控制台（比如这个），然后输入 $("body")。它显示为 DOM 元素数组。

@Barmar：你用的是什么浏览器？至少在 Firefox 上，$('body') 的显示与x = 0: document.getElementsByTagName('body')[0], context: document, selector: 'body', length: 1 完全相同（后者不涉及 jQuery）。

不，“浏览器”（渲染和 JS 层）没有做任何特别的事情。控制台知道 DOM 节点（类似于 if (x instanceof Node) specialHandling() ）