Testing the type of a DOM element in JavaScript

Question

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

User · Answer

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      lt div id  newthing  gt  lt  div gt    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

User · Answer

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

User · Answer

I have another way of testing the same    x000D   x000D  Element prototype typeof    element   x000D  var element   document body     any dom element x000D  if  element  amp  amp  element typeof     element    x000D     return true   x000D        this is a dom element x000D    x000D  else  x000D    return false   x000D       this isn t a dom element x000D    x000D   x000D   x000D

User · Answer

if  element nodeName     quot A quot            else if  element nodeName     quot TD quot

User · Answer

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

User · Answer

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   x000D   x000D  console log document querySelector   anchorelem   instanceof HTMLAnchorElement   x000D  console log document querySelector   divelem   instanceof HTMLDivElement   x000D  console log document querySelector   buttonelem   instanceof HTMLButtonElement   x000D  console log document querySelector   inputelem   instanceof HTMLInputElement   x000D   lt a id  anchorelem  href    gt Anchor element lt  a gt  x000D   lt div id  divelem  gt Div Element lt  div gt  x000D   lt button id  buttonelem  gt Button Element lt  button gt  x000D   lt br gt  lt input id  inputelem  gt  x000D   x000D   x000D    The interface check can be made in 2 ways as elem instanceof HTMLAnchorElement or elem constructor name     HTMLAnchorElement   both returns true

User · Answer

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

User · Answer

I have another way of testing the same    x000D   x000D  Element prototype typeof    element   x000D  var element   document body     any dom element x000D  if  element  amp  amp  element typeof     element    x000D     return true   x000D        this is a dom element x000D    x000D  else  x000D    return false   x000D       this isn t a dom element x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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      lt div id  newthing  gt  lt  div gt    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

User · Answer

if  element nodeName     quot A quot            else if  element nodeName     quot TD quot

User · Answer

if  element nodeName     quot A quot            else if  element nodeName     quot TD quot

User · Answer

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

User · Answer

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

User · Answer

if  element nodeName     quot A quot            else if  element nodeName     quot TD quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   x000D   x000D  console log document querySelector   anchorelem   instanceof HTMLAnchorElement   x000D  console log document querySelector   divelem   instanceof HTMLDivElement   x000D  console log document querySelector   buttonelem   instanceof HTMLButtonElement   x000D  console log document querySelector   inputelem   instanceof HTMLInputElement   x000D   lt a id  anchorelem  href    gt Anchor element lt  a gt  x000D   lt div id  divelem  gt Div Element lt  div gt  x000D   lt button id  buttonelem  gt Button Element lt  button gt  x000D   lt br gt  lt input id  inputelem  gt  x000D   x000D   x000D    The interface check can be made in 2 ways as elem instanceof HTMLAnchorElement or elem constructor name     HTMLAnchorElement   both returns true

[javascript] Testing the type of a DOM element in JavaScript

Examples related to javascript

Examples related to prototypejs