Interface of an element in JavaScript

Question

In Chrome, when debugging in JavaScript, it is interesting to get the interface of an element.

Typing the variable name that holds the element in the console usually gives me the element tag. How can I get the interface matching the element. Sometimes Chrome outputs it, but sometimes gives the tag. I am unsure how Chrome returns the value.

possible duplicate of [How do I console.log a jQuery DOM Element in Chrome?](http://stackoverflow.com/questions/13974740/how-do-i-console-log-a-jquery-dom-element-in-chrome) — Naftali, May 08 '13 at 16:57
The DOM interfaces... HTMLElement, SVGElement, HTMLInputElement etc. — jsgoupil, May 08 '13 at 16:57
There's a difference between `console.log(elementReference);` and `console.log("Reference: " + elementReference);`. Depending on what you want to do, you may want to pass multiple items to `console.log` instead of concatenating (if you are). `console.log` also does weird things based on certain elements - for example, when providing an `` element, it prints its `href`, yet `typeof elementReference` is still "object". — Ian, May 08 '13 at 17:04

loganfsmyth · Accepted Answer · 2013-05-08T17:34:43.263

2

Browsers try to be smart when displaying things via console.log to make the output more readable. If you want to consistently get a tree of properties that you can navigate through, you can use console.dir.

interface has no meaning in JS and a very specific meaning in other languages. You can potentially see the WebIDL interface of a DOM Element by viewing the prototype of an element using console.log(element.__proto__); but that is entirely browser dependent and non-standard.

edited May 08 '13 at 17:34

answered May 08 '13 at 16:59

loganfsmyth

156,129
30
331
251

Actually, by doing console.dir I almost get what I wanted. I saw that the interface is on the \_\_proto__. So writing element.__proto__ seems to give me what I wanted. – jsgoupil May 08 '13 at 17:02
@jsgoupil JS has no interface concept, methods could also be directly in output of `console.dir` if the methods are added via `this.method = function(){}`, or they could be inside of the `proto` of the `proto` of the `proto`, there is no one list of all of the functions. – loganfsmyth May 08 '13 at 17:04
DOM Elements definitely have interfaces. This is what I was looking for. Something as such: http://www.w3.org/TR/html-markup/input.text.html#input.text-interface – jsgoupil May 08 '13 at 17:08
@jsgoupil Ah I see, yes the C++ code underlying the DOM has an explicit name, and that name happens to be exposed as the name of the prototype constructor's name. Please be more specific in your questions in the future. This is all useful for debugging, just be sure not to use it in production code. – loganfsmyth May 08 '13 at 17:14
\@loganfsmyth Your answer was good already. Your edit is diverging from the original question. You should revert to not talk about the full list of properties, so I can accept your answer. – jsgoupil May 08 '13 at 17:14
@jsgoupil Just to be perfectly clear, that's an "interface" in [Web IDL](https://en.wikipedia.org/wiki/Web_IDL) (see also the [W3 spec](http://www.w3.org/TR/WebIDL/)), which is unrelated to the inheritance mechanics of JavaScript. – apsillers May 08 '13 at 17:20

score 1 · Answer 2 · answered May 08 '13 at 23:03

1

If you want a standard way (i.e. not using __proto__):

console.log(el.constructor.name);

answered May 08 '13 at 23:03

Florian Margaine

58,730
15
91
116

score 0 · Answer 3 · answered May 08 '13 at 17:00

0

It looks like you can force one view or the other by specifying which you want:

console.dir(el)

gives you the "interface" for that el, while

console.dirxml(el)

prints the element as it would appear in the Elements panel.

answered May 08 '13 at 17:00

Chris Nielsen

14,731
7
48
54

Interface of an element in JavaScript

3 Answers3