JavaScript中元素的接口

Question

在Chrome中，在使用JavaScript进行调试时，获取元素的界面很有意思。

在控制台中键入保存元素的变量名称通常会为我提供元素标记。如何获得与元素匹配的接口。有时Chrome会输出它，但有时会提供标记。我不确定Chrome如何返回该值。

Answer 1

浏览器在通过console.log显示内容时尝试变得聪明，以使输出更具可读性。如果您想要始终获得可以浏览的属性树，可以使用console.dir。

interface在JS中没有任何意义，在其他语言中具有非常特殊的含义。您可以通过使用console.log(element.__proto__);查看元素的原型来查看DOM元素的WebIDL接口，但这完全取决于浏览器和非标准。

Answer 2

如果您想要标准方式（即不使用__proto__）：

console.log(el.constructor.name);

Answer 3

看起来你可以通过指定你想要的方式强制一个视图或另一个视图：

console.dir(el)

为您提供el的“界面”，而

console.dirxml(el)

打印出元素面板中显示的元素。