Как я могу определить тип HTML-элемента в JavaScript?

191

Мне нужен способ определить тип HTML-элемента в JavaScript. У него есть идентификатор, но сам элемент может быть a <div>, <form>полем, a <fieldset>и т. Д. Как мне этого добиться?

javascript dom

— AdamTheHutt
источник

290

nodeNameэто атрибут, который вы ищете. Например:

var elt = document.getElementById('foo');
console.log(elt.nodeName);

Обратите внимание, что nodeNameвозвращается имя элемента с заглавной буквы и без угловых скобок, что означает, что если вы хотите проверить, является ли элемент <div>элементом, вы можете сделать это следующим образом:

elt.nodeName == "DIV"

Хотя это не даст вам ожидаемых результатов:

elt.nodeName == "<div>"

— pkaeding
источник

29

Я рекомендую сделать это следующим образом: если (elt.nodeName.toLowerCase () === "div") {...} Таким образом, если по какой-либо причине он больше не возвращается заглавными буквами (строчными или смешанными), вы не нужно будет его менять, и этот код все равно будет работать нормально.

— TheCuBeMan

6

В ответ на @TheCuBeMan использование toLowerCase () означает, что вам также необходимо убедиться, что существует nodeName (если это вообще возможно, elt, на самом деле, не элемент):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Эрик Купманс

о чем localName?

— Бомба

46

Как насчет element.tagName?

Смотрите также tagNameдокументы по MDN .

— Брайан Клайн
источник

4

По меткам времени ты побил меня менее чем за 1 секунду!

— век

27

Из QuirksMode: Мой совет не использовать tagName вообще. nodeName содержит все функции tagName, а также некоторые другие. Поэтому nodeName всегда лучший выбор.

— bdukes

7

Иногда хочется element.constructor.name

document.createElement('div').constructor.name
// HTMLDivElement

document.createElement('a').constructor.name
// HTMLAnchorElement

document.createElement('foo').constructor.name
// HTMLUnknownElement

— golopot
источник

7

Вы можете использовать проверку общего кода через instanceof:

var e = document.getElementById('#my-element');
if (e instanceof HTMLInputElement) {}         // <input>
elseif (e instanceof HTMLSelectElement) {}    // <select>
elseif (e instanceof HTMLTextAreaElement) {}  // <textarea>
elseif (  ... ) {}                            // any interface

Посмотрите здесь полный список интерфейсов.

— Code4R7
источник