HTML DOM 元素名称作为字符串

MC *_*ror 1 html javascript dom

假设我有以下 HTML 片段:

<input type="text" id="myinput" />
Run Code Online (Sandbox Code Playgroud)

现在我想使用 JavaScript 获取该 DOM 元素:

var element = document.getElementById("myinput");
Run Code Online (Sandbox Code Playgroud)

工作正常,目前没有问题。

但是,当我使用 将alert(element);其打印在警报框中时,它会显示object HTMLInputElement.
有没有办法将该元素名称(HTMLInputElement)作为字符串获取?

(请注意,在说“元素名称”时,我不是指 元素name 属性,而是指在使用时如何显示名称alert(),如上所述。

mae*_*ics 5

在某些浏览器中,例如 Firefox(和 Chrome,可能还有其他浏览器),您可以执行以下操作:

element.constructor.name; // => "HTMLInputElement"
Run Code Online (Sandbox Code Playgroud)

但总的来说,它有点复杂,甚至可能不完全可靠。最简单的方法可能是这样的:

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"
Run Code Online (Sandbox Code Playgroud)

[编辑]

或者,使用“nodeName”属性,您可以编写一个实用程序函数,它通常应该更可靠:

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";
  }
}
Run Code Online (Sandbox Code Playgroud)

(感谢@Esalija 提供更智能的实现,@Alohci 指出特殊情况。)