如何将 HTML 元素记录为 JavaScript 对象?

IT技术 javascript google-chrome google-closure-library developer-tools
2021-03-08 17:40:13

使用谷歌浏览器,如果你console.log是一个对象,它可以让你检查控制台中的元素。例如:

var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);

这将打印出来Object,可以通过单击旁边的箭头进行检查。但是,如果我尝试记录一个 HTMLElement:

var b = goog.dom.query('html')[0];
console.log(b);

这将打印出<html></html>无法通过单击旁边的箭头进行检查的内容。如果我想查看 JavaScript 对象(及其方法和字段),而不仅仅是元素的 DOM,我该怎么做?

3个回答

使用console.dir

var element = document.documentElement; // or any other element
console.log(element); // logs the expandable <html>…</html>
console.dir(element); // logs the element’s properties and values

如果您已经在控制台中,您可以简单地输入dir而不是console.dir

dir(element); // logs the element’s properties and values

要简单地列出不同的属性名称(没有值),您可以使用Object.keys

Object.keys(element); // logs the element’s property names

即使没有公共console.keys()方法,如果您已经在控制台中,您也可以输入:

keys(element); // logs the element’s property names

但是,这在控制台窗口之外不起作用。

当我直接在控制台中使用 console.dir() 时,它可以工作。但是如果我在 VS Code 的实际 .js 文件中编写它,chrome 开发控制台只会记录它写入的文件的名称和行号。碰巧知道为什么吗?
2021-05-11 17:40:13

试试这个:

console.dir(element)

参考
[视频] Paul Irish 成为控制台高级用户。

很棒的直截了当的答案。“最老”的排序在另一个之后出现,因此接受,但非常感谢!
2021-04-29 17:40:13
没问题。我不介意接受哪个,但接受的答案应该是以后对其他人最有帮助的答案。
2021-05-11 17:40:13
+1 我总是[[element]]用来创建一个数组,以便 Chrome 被迫将它显示为一个对象......谢谢!
2021-05-13 17:40:13

浏览器只打印html部分,你可以把元素放在一个对象中查看圆顶结构。

console.log({element})