Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

google chrome - How can I log an HTML element as a JavaScript object?

Using Google Chrome, if you console.log an object, it lets you inspect the element in the console. For example:

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

This prints out Object which can be inspected by clicking on arrows next to it. If however I try to log an HTMLElement:

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

This prints out <html></html> which can not be inspected by clicking on arrows next to it. If I want to see the JavaScript object (with its methods and fields) instead of just the DOM of the element, how would I do that?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Use 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

If you’re inside the console already, you could simply type dir instead of console.dir:

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

To simply list the different property names (without the values), you could use Object.keys:

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

Even though there’s no public console.keys() method, if you’re inside the console already, you could just enter:

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

This won’t work outside the console window, though.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...