如何将HTML元素记录为JavaScript对象？_Javascript_Google Chrome_Google Closure Library_Developer Tools

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

javascript google-chrome

如何将HTML元素记录为JavaScript对象？,javascript,google-chrome,google-closure-library,developer-tools,Javascript,Google Chrome,Google Closure Library,Developer Tools,使用Google Chrome，如果你console.log一个对象，它可以让你检查控制台中的元素。例如： var a = { "foo" : "bar", "whiz" : "bang" }; console.log(a); 这将打印出对象，可通过单击旁边的箭头进行检查。但是，如果我尝试记录HtmleElement： var b = goog.dom.query('html')[0]; console.log(b); 这将打印出，单击旁边的箭头无法检查。如果我想查看JavaScript对象

使用Google Chrome，如果你

console.log

一个对象，它可以让你检查控制台中的元素。例如：

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

这将打印出

对象

，可通过单击旁边的箭头进行检查。但是，如果我尝试记录HtmleElement：

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

这将打印出

，单击旁边的箭头无法检查。如果我想查看JavaScript对象（及其方法和字段），而不仅仅是元素的DOM，我将如何做到这一点？

尝试以下方法：

console.dir(element)

参考

使用

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(element); // logs the element’s properties and values

要简单地列出不同的属性名称（不带值），可以使用

Object.keys

：

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

即使没有public

console.keys（）

方法，如果您已经在控制台中，也可以输入：

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

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

浏览器仅打印html部分，您可以将元素放入对象中以查看圆顶结构

console.log（{element}）

+1我总是使用

[[element]]

创建一个数组，这样Chrome就被迫将其显示为一个对象。。。谢谢非常直截了当的回答。按“最老的”分类，一根头发排在另一根后面，因此接受，但非常感谢！没问题。我不介意哪一个被接受，但被接受的答案应该是以后对其他人最有帮助的答案。当我在控制台中直接使用console.dir（）时，它会起作用。但是，如果我在VS代码中的实际.js文件中写入它，chrome开发控制台只会记录写入该文件的文件名和行号。你知道为什么吗？