Тестування типу елемента DOM в JavaScript


99

Чи є спосіб перевірити тип елемента в 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.


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

1
Іноді так і є. У будь-якому випадку, ви завжди можете використовувати element.nodeName.match(/\bTBODY\b/i)або element.nodeName.toLowerCase() == 'tbody'інше
Robusto

9
@Robusto невірний. Якщо документ є HTML, а реалізація DOM правильна, він завжди буде великим. Відповідно до: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 у розділі "tagName" (для елементів nodeName == tagName) "HTML DOM повертає тегName елемента 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.