314

I need a way to determine the type of an HTML element in JavaScript. It has the ID, but the element itself could be a <div>, a <form> field, a <fieldset>, etc. How can I achieve this?

AdamTheHutt
  • 8,287
  • 8
  • 33
  • 33

4 Answers4

462

nodeName is the attribute you are looking for. For example:

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

Note that nodeName returns the element name capitalized and without the angle brackets, which means that if you want to check if an element is an <div> element you could do it as follows:

elt.nodeName == "DIV"

While this would not give you the expected results:

elt.nodeName == "<div>"
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
pkaeding
  • 36,513
  • 30
  • 103
  • 141
  • 44
    I recommend doing it like this: if(elt.nodeName.toLowerCase() === "div") { ... } This way, if for some reason it is no longer returned in uppercase letters (lowercase or mixed), you won't have to change it and this code will still work fine. – TheCuBeMan Oct 20 '14 at 15:39
  • 13
    In response to @TheCuBeMan, using toLowerCase() means you also need to make sure nodeName exists (if it's at all possible elt is not, in fact, an element): `if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }` – Erik Koopmans Nov 06 '17 at 07:10
  • what about `localName`? – bomba Sep 13 '18 at 09:03
68

What about element.tagName?

See also tagName docs on MDN.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Brian Cline
  • 20,012
  • 6
  • 26
  • 25
  • 7
    According to timestamps you beat me by less than 1 second! – eyelidlessness Oct 31 '08 at 17:32
  • 33
    From QuirksMode: My advice is not to use tagName at all. nodeName contains all functionalities of tagName, plus a few more. Therefore nodeName is always the better choice. – bdukes Oct 31 '08 at 17:38
  • @bdukes Are you still here? You say you quote QuirksMode, but I can't find the original text there, and I'm curious what the differences are. As well as `localName`. – Mr Lister Jul 27 '22 at 08:37
  • 2
    https://www.quirksmode.org/dom/core/#t23 looks like `nodeName` also provides the name of attribute, text, and comment nodes, in addition to tags/elements. I believe `localName` is from the XML APIs. If you know you're always dealing with an element there's probably not a lot of difference, but `nodeName` is the more versatile option. – bdukes Jul 27 '22 at 18:18
39

You can use generic code inspection via 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

Look here for a complete list of interfaces.

Code4R7
  • 2,600
  • 1
  • 19
  • 42
23

Sometimes you want element.constructor.name

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

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

document.createElement('foo').constructor.name
// HTMLUnknownElement
golopot
  • 10,726
  • 6
  • 37
  • 51