Как я могу определить тип 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
источник