HTML DOM元素名称作为字符串

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.

Answer 1

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.)

Answer 2

alert(element.nodeName);

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

Answer 3

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.

Answer 4

document.getElementById returns the HTML element as an object. Simply get the attribute of the object you want to display in the alert instead (eg, 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 (eg, alert(element.toString()); ).

Hope this helps,

Pete

Answer 5

如果我有正确的问题，则应尝试document.getElementById("myinput").toString() 。