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

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


Use console.dir:

var element = document.documentElement; // or any other elementconsole.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.


Browser print only html part, you can put the element in a object to see dome structure.

console.log({element})