Testing the type of a DOM element in JavaScript

JavascriptPrototypejs

Javascript Problem Overview


Is there a way to test the type of an element in JavaScript?

The answer may or may not require the prototype library, however the following setup does make use of the library.

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

Javascript Solutions


Solution 1 - Javascript

You can use typeof(N) to get the actual object type, but what you want to do is check the tag, not the type of the DOM element.

In that case, use the elem.tagName or elem.nodeName property.

if you want to get really creative, you can use a dictionary of tagnames and anonymous closures instead if a switch or if/else.

Solution 2 - Javascript

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

Solution 3 - Javascript

Perhaps you'll have to check the nodetype too:

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
  }
}

Edit: Corrected the nodeType-value

Solution 4 - Javascript

roenving is correct BUT you need to change the test to:

if(element.nodeType == 1) {
//code
}

because nodeType of 3 is actually a text node and nodeType of 1 is an HTML element. See http://www.w3schools.com/Dom/dom_nodetype.asp

Solution 5 - Javascript

I usually get it from the toString() return value. It works in differently accessed DOM elements:

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]"

Then the relevant piece:

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

It works in Chrome, FF, Opera, Edge, IE9+ (in older IE it return "[object Object]").

Solution 6 - Javascript

Although the previous answers work perfectly, I will just add another way where the elements can also be classified using the interface they have implemented.

Refer W3 Org for available interfaces

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">

The interface check can be made in 2 ways as elem instanceof HTMLAnchorElement or elem.constructor.name == "HTMLAnchorElement", both returns true

Solution 7 - Javascript

I have another way of testing the same.

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
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCasey WatsonView Question on Stackoverflow
Solution 1 - JavascriptFlySwatView Answer on Stackoverflow
Solution 2 - JavascriptbobwienholtView Answer on Stackoverflow
Solution 3 - JavascriptroenvingView Answer on Stackoverflow
Solution 4 - JavascriptEric WendelinView Answer on Stackoverflow
Solution 5 - JavascriptHerbertuszView Answer on Stackoverflow
Solution 6 - JavascriptVignesh RajaView Answer on Stackoverflow
Solution 7 - JavascriptnicolsondsouzaView Answer on Stackoverflow