Тестирование типа элемента DOM в JavaScript
есть ли способ проверить тип элемента в JavaScript?
ответ может потребовать или не потребовать библиотеки прототипов, однако следующая настройка использует библиотеку.
function(event) {
var element = event.element();
// if the element is an anchor
...
// if the element is a td
...
}
7 ответов
можно использовать typeof(N)
чтобы получить фактический тип объекта, но то, что вы хотите сделать, это проверить тег, а не тип элемента DOM.
В этом случае, используйте elem.tagName
или elem.nodeName
собственность.
Если вы хотите получить действительно творческий, вы можете использовать словарь tagnames и анонимных замыканий вместо этого, если переключатель или if / else.
возможно, Вам также придется проверить тип nodetype:
if(element.nodeType == 1){//element of type html-object/tag
if(element.tagName=="a"){
//this is an a-element
}
if(element.tagName=="div"){
//this is a div-element
}
}
Edit: исправлено значение nodeType-value
roenving правильно, но вам нужно изменить тест на:
if(element.nodeType == 1) { //code }
потому что nodeType 3 На самом деле является текстовым узлом, а nodeType 1-HTML-элементом. См.http://www.w3schools.com/Dom/dom_nodetype.asp
обычно я получаю его из возвращаемого значения toString (). Он работает в различных доступных элементах DOM:
var a = document.querySelector('a');
var img = document.createElement('img');
document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');
Object.prototype.toString.call(a); // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img); // "[object HTMLImageElement]"
Object.prototype.toString.call(div); // "[object HTMLDivElement]"
затем важный фрагмент:
Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);
он работает в Chrome, FF, Opera, Edge, IE9+ (в более старом IE он возвращает "[object Object]").
У меня есть другой способ проверить то же самое.
Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
return true;
// this is a dom element
}
else{
return false;
// this isn't a dom element
}
хотя предыдущие ответы работают отлично, я просто добавлю еще один способ, где элементы также могут быть классифицированы с помощью интерфейса, который они реализовали.
Refer W3 Org для доступных интерфейсов
console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);
<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">
проверку интерфейса можно сделать в 2 путях как elem instanceof HTMLAnchorElement
или elem.constructor.name == "HTMLAnchorElement"
, оба возвращает true