Як я можу визначити тип елемента HTML у JavaScript?

191

Мені потрібен спосіб визначити тип HTML-елемента в JavaScript. Він має ідентифікатор, але самим елементом може бути а <div>, <form>поле, а <fieldset>тощо. Як я можу цього досягти?

javascript dom

— AdamTheHutt
джерело

290

nodeName- це атрибут, який ви шукаєте. Наприклад:

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

Зауважте, що nodeNameповертає ім'я з великої літери та без кутових дужок, це означає, що якщо ви хочете перевірити, чи є <div>елемент, ви можете зробити це наступним чином:

elt.nodeName == "DIV"

Хоча це не дасть очікуваних результатів:

elt.nodeName == "<div>"

— пкідинг
джерело

29

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

— TheCuBeMan

6

У відповідь на @TheCuBeMan, використовуючи toLowerCase () означає, що вам також потрібно переконатися, що nodeName існує (якщо це взагалі не можливо, elt - це не елемент):if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Ерік Коопманс

про що localName?

— bomba

46

Про що element.tagName?

Дивіться також tagNameдокументи про MDN .

— Брайан Клайн
джерело

4

Відповідно до часових позначок, ти побив мене менше ніж на 1 секунду!

— безпліддя

27

Від QuirksMode: Моя порада взагалі не використовувати tagName. nodeName містить усі функції tagName, плюс ще кілька. Тому nodeName - це завжди кращий вибір.

— бдукс

7

Іноді хочеться element.constructor.name

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

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

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

— голопот
джерело

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
джерело