Question

81

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

rated 0 times [ 86] [ 5] / answers: 1 / hits: 103960 / 12 Years ago, fri, march 9, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 12 Years ago mariann · Accepted Answer

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.