javascript HTML DOM 元素名称作为字符串
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8836557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML DOM element name as a string
提问by MC Emperor
Suppose I have the following HTML snippet:
假设我有以下 HTML 片段:
<input type="text" id="myinput" />
Now I want to get that DOM element using JavaScript:
现在我想使用 JavaScript 获取那个 DOM 元素:
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?
但是,当我使用 将alert(element);
其打印在警报框中时,它会显示object HTMLInputElement
.
有没有办法将该元素名称(HTMLInputElement)作为字符串获取?
(Notice that when saying"element name" I do not mean thename
attribute of an element, but the name how it is displayed when using alert()
for example, as described above.
(请注意,在说“元素名称”时,我不是指元素的name
属性,而是指在使用时如何显示名称alert()
,如上所述。
回答by maerics
In some browsers, such as Firefox(and Chrome, potentially others) you can do:
在某些浏览器中,例如 Firefox(和 Chrome,可能还有其他浏览器),您可以执行以下操作:
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:
或者,使用“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";
}
}
(Thanks @Esailija for the smarter implementation, @Alohci for pointing out exceptional cases.)
(感谢@Esalija 提供更智能的实现,@Alohci 指出特殊情况。)
回答by greut
alert(element.nodeName);
回答by Anthony Grist
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:
将对象传递给alert()
函数时,它会隐式调用.toString()
该对象以获取警报文本。你可以这样做:
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.
然后使用该string
变量仅获取 HTMLInputElement 部分。
回答by pete
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());
).
document.getElementById 将 HTML 元素作为对象返回。只需获取您想要在警报中显示的对象的属性(例如,alert(element.getAttribute('ID'));
)。或者,如果您希望在警报中显示“[object HTMLInputElement]”,只需对警报中的对象调用 toString() 方法(例如,alert(element.toString());
)。
Hope this helps,
希望这可以帮助,
Pete
皮特
回答by danyloid
if I've got the question correctly you should try document.getElementById("myinput").toString()
.
如果我的问题正确,你应该试试document.getElementById("myinput").toString()
。