Тестирование типа элемента DOM в JavaScript

Question

Есть ли способ проверить тип элемента в JavaScript?

Для ответа может потребоваться или не потребоваться библиотека прототипов, однако следующие настройки действительно используют библиотеку.

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

Answer 1

Вы можете использовать typeof(N), чтобы получить фактический тип объекта, но вам нужно проверить тег, а не тип элемента DOM.

В этом случае используйте свойство elem.tagName или elem.nodeName.

если вы хотите проявить творческий подход, вы можете использовать словарь тэгов и анонимных замыканий вместо переключателя или if / else.

Answer 2

if (element.nodeName == "A")
{
}
else if (element.nodeName == "TD")
{
}

Answer 3

Возможно, вам придется проверить и тип узла:

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
  }
}

Редактировать: исправлено значение nodeType

Answer 4

ровен правильно, НО вам нужно изменить тест на:

if(element.nodeType == 1) {
//code
}

потому что nodeType из 3 на самом деле является текстовым узлом, а nodeType из 1 является HTML-элементом. Смотри http://www.w3schools.com/Dom/dom_nodetype.asp

Answer 5

Хотя предыдущие ответы работают отлично, я просто добавлю еще один способ, с помощью которого элементы также можно классифицировать с помощью реализованного ими интерфейса.

См. 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">

Проверка интерфейса может быть выполнена двумя способами: elem instanceof HTMLAnchorElement или elem.constructor.name == "HTMLAnchorElement", оба возвращаются true

Answer 6

Я обычно получаю его из возвращаемого значения 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 он возвращает «[объект объекта]»).

Answer 7

У меня есть другой способ проверить то же самое.

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
}