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


100

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

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

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

Ответы:


125

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

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

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


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

1
Иногда бывает. В любом случае, вы всегда можете использовать element.nodeName.match(/\bTBODY\b/i)и element.nodeName.toLowerCase() == 'tbody'т. Д.
Робусто

9
@Robusto неверен. Если документ HTML и реализация DOM правильная, он всегда будет в верхнем регистре. Согласно: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 в разделе «tagName» (для элементов nodeName == tagName) «HTML DOM возвращает tagName элемента HTML в каноническая форма верхнего регистра, независимо от регистра в исходном HTML-документе ".
bobwienholt

19

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

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


3
Остерегайтесь случая tagName.
век

@Casey: Это будет на HTML-странице; на странице XHTML регистр тега сохраняется (поэтому "a" будет "A" на страницах HTML и "a" на страницах XHTML): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (Предполагая, что страница XHTML обслуживалась правильно и не обслуживалась text/html.)
TJ Crowder

2
@TJCrowder, похоже, лучший вариантelement.tagName.toLowerCase() === 'a'
p3drosola

@Ped: Да, или, element.nodeName.toLowerCase()если возможно, elementэто не будет фактически элементом (например, если вы не выполнили nodeType == 1проверку, указанную выше). В Nodeинтерфейсе есть nodeName. Для Elementслучаев, это так же , как tagName. Для других типов узлов это такие вещи, как "#text"или "#document". nodeTypeХотя, думаю, я всегда буду использовать чек.
TJ Crowder

Обновление 2019: по крайней мере, в современном Chromium (v79.0.3945.79) строка тега написана в верхнем регистре. «Для деревьев DOM, которые представляют документы HTML, возвращаемое имя тега всегда в канонической форме в верхнем регистре. Например, tagName, вызываемый в элементе <div>, возвращает« DIV » https://developer.mozilla.org/en- US / docs / Web / API / Element / tagName правильный способ сравнения:node.tagName == 'DIV'
marcs


2

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


2

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

Обратитесь к 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


0

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

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
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.