HTML DOM element name as a string

Question

Suppose I have the following HTML snippet:

<input type="text" id="myinput" />

Now I want to get that DOM element using JavaScript:

var element = document.getElementById("myinput");

Works fine, no problem so far.

But when I print it inside an alert box using alert(element);, it displays object HTMLInputElement.
Is there a way to get that element name (HTMLInputElement) as a string?

(Notice that when saying "element name" I do not mean the name attribute of an element, but the name how it is displayed when using alert() for example, as described above.

The best solution might depend on why you need the name. Can you elaborate on what you need it for? — Alohci, Jan 12 '12 at 14:41

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

In some browsers, such as Firefox (and Chrome, potentially others) you can do:

element.constructor.name; // => "HTMLInputElement"

But in general it's a bit more complicated, perhaps not even totally reliable. The easiest way might be as such:

function getClassName(o) {
  // TODO: a better regex for all browsers...
  var m = (o).toString().match(/\[object (.*?)\]/);
  return (m) ? m[1] : typeof o;
}
getClassName(element); // => "HTMLInputElement"
getClassName(123); // => "number"

[Edit]

Or, using the "nodeName" attribute, you could write a utility function which should be generally much more reliable:

function getHtmlElementClassName(htmlElement) {
  var n = htmlElement.nodeName;
  if (n.matches(/^H(\d)$/)) {
    return "HTMLHeadingElement";
  } else if (/* other exceptional cases? */) {
    // ...
  } else {
    return "HTML" + n.charAt(0) + n.substr(1).toLowerCase() + "Element";
  }
}

(Thanks @Esailija for the smarter implementation, @Alohci for pointing out exceptional cases.)

edited May 23 '17 at 10:34

Community

1
1

answered Jan 12 '12 at 14:27

maerics

151,642
46
269
291

Instead of writing 35100 switch cases, you could just do something like `"HTML" + nodename.charAt(0) + nodename.substr(1).toLowerCase() + "Element";` – Esailija Jan 12 '12 at 14:44
@Esailija: yes, much better =) – maerics Jan 12 '12 at 14:48
@maerics @Esailija Does that mean that `HTMLInputElement` is not the actual (class) name of the object? – MC Emperor Jan 12 '12 at 15:04
@MCEmperor: no, HTMLInputElement is the actual "class" (constructor) name, it just means that the JavaScript language doesn't seem to think it's important to get the name of a function (constructor), for obvious reasons (e.g. they don't always have one!). – maerics Jan 12 '12 at 15:06
It seems that there is no function or property to get the bare class name of the DOM object (using Firefox 9). Thus it needs to be derived from `element.toString()`, parsing the actual class name. The above function `getClassName(o)` satisfies. – MC Emperor Jan 12 '12 at 16:24
Do note that the two methods do not always return the same result. For example, if the object `o` is a `H1` element `getClassName(o)` will return `HTMLHeadingElement` while `getHtmlElementClassName(o)` will return `HTMLH1Element`. – Alohci Jan 13 '12 at 01:33
@Alohci: hmm, yes, true, clearly there are exceptions to my latest attempt. The final solution should have to switch against these exceptional cases and handle them separately before resorting to the default case. – maerics Jan 13 '12 at 01:38

score 3 · Answer 2 · answered Jan 12 '12 at 14:22

3

alert(element.nodeName);

https://developer.mozilla.org/En/DOM/Node.nodeName

answered Jan 12 '12 at 14:22

greut

4,305
1
30
49

1

Or from the specification rather than a (rather good) meta-site: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095 – T.J. Crowder Jan 12 '12 at 14:24
That's not correct, it displays `INPUT` rather than `HTMLInputElement`. – MC Emperor Jan 12 '12 at 14:26
`nodeName` just returns 'INPUT' – Matt H Jan 12 '12 at 14:27
1

+1 This seems to be the most reliable as it's defined by a W3C spec. You could make a simple utility function that maps the node names to the constructor names, as you seek. – maerics Jan 12 '12 at 14:38
@Esailija "It conveys same information" – You are partially correct. It does, but it's not strictly the same. ;-) – MC Emperor Jan 12 '12 at 16:25
@MCEmperor `"INPUT|Input|input"` is the information, `"HTML"` and `"Element"` are noise. So they convey the same information. – Esailija Jan 12 '12 at 16:27

score 1 · Answer 3 · answered Jan 12 '12 at 14:26

1

When passing an object to the alert() function, it implicitly calls .toString() on that object in order to get the text for the alert. You could do something like:

var element = document.getElementById("myInput");
var string = element.toString(); // this will return 'object HTMLInputElement'

then work with the string variable to get only the HTMLInputElement part.

answered Jan 12 '12 at 14:26

Anthony Grist

38,173
8
62
76

1

Sigh, not it doesn't. For example, in IE7 it returns `"[object]"`. It's much, much, much better to get `.nodeName` and add the HTML and Element part yourself if that's even important at all. – Esailija Jan 12 '12 at 14:30

pete · Answer 4 · 2012-01-12T14:30:20.657

0

document.getElementById returns the HTML element as an object. Simply get the attribute of the object you want to display in the alert instead (e.g., alert(element.getAttribute('ID'));). Alternatively, if you want '[object HTMLInputElement]' displayed in the alert, simply call the toString() method on the object in the alert (e.g., alert(element.toString());).

Hope this helps,

Pete

edited Jan 12 '12 at 14:30

answered Jan 12 '12 at 14:22

pete

24,141
4
37
51

Post was updated it was not that clear IMO when this was posted. – Craig Jan 12 '12 at 14:26

score 0 · Answer 5 · answered Jan 12 '12 at 14:24

0

if I've got the question correctly you should try document.getElementById("myinput").toString().

answered Jan 12 '12 at 14:24

danyloid

1,677
3
21
47

HTML DOM element name as a string

5 Answers5