Login/Register
How can I log an HTML element as a JavaScript object?
Asked Answered
Solved javascriptgoogle-chromegoogle-closure-librarydeveloper-tools
C

3

119

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?

Combined answered 9/3, 2012 at 12:10 Comment(0)
I
218

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.

Immersion answered 9/3, 2012 at 12:11 Comment(1)
When I use console.dir() directly in the console, it works. But if I write it in my actual .js file in VS Code, the chrome dev console just logs the name of the file that it was written in and the line number. Do happen to know why? – Victory
C
38

try this:

console.dir(element)

Reference
[Video] Paul Irish on becoming a console power user.

Chancery answered 9/3, 2012 at 12:11 Comment(3)
+1 I was always using [[element]] to create an array so that Chrome was forced to display it as an object... Thanks! – Nathanielnathanil
Great straightforward answer. By 'oldest' sort came in a hair after the other one, hence the accept, but many thanks! – Combined
No problems. I don't mind which is accepted, but accepted answer should be the one most helpful to others later. – Chancery
P
10

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

console.log({element})
Paternoster answered 20/7, 2020 at 6:41 Comment(2)
This was what I need, thanks! For the record, the output looks like: document: document, location: Location {ancestorOrigins: (..) – Wanderlust
Good to know it, hope you gain more by it – Paternoster

© 2022 - 2024 — McMap. All rights reserved.