How do you check if a JavaScript Object is a DOM Object

Question

I m trying to get   document createElement  div        gt  true  tagName   foobar something        gt  false   In my own scripts  I used to just use this since I never needed tagName as a property   if   object tagName  throw        So for the second object  I came up with the following as a quick solution -- which mostly works      The problem is  it depends on browsers enforcing read-only properties  which not all do   function isDOM obj      var tag   obj tagName    try       obj tagName           Read-only for DOM  should throw exception     obj tagName   tag     Restore for normal objects     return false      catch  e        return true          Is there a good substitute

User · Answer

var isElement   function e       try             if e is an element attached to the DOM  we trace its lineage and use native functions to confirm its pedigree         var a    e   t  s  l   0  h   document getElementsByTagName  HEAD   0   ht   document getElementsByTagName  HTML   0           while l  document body amp  amp l  h amp  amp l parentNode  l   a a push l parentNode -1           t   a a length-1           s   document createElement  SCRIPT         safe to place anywhere and it won t show up         while a length gt 1       assume the top node is an element for now                var p   a pop   n   a a length-1               p insertBefore s n                     if s parentNode s parentNode removeChild s           if t  document body amp  amp t  h amp  amp t  ht                 the top node is not attached to the document  so we don t have to worry about it resetting any dynamic media                test the top node             document createElement  DIV   appendChild t  parentNode removeChild t           return e            catch e        return null      I tested this on Firefox  Safari  Chrome  Opera and IE9  I couldn t find a way to hack it  In theory  it tests every ancestor of the proposed element  as well as the element itself  by inserting a script tag before it  If its first ancestor traces back to a known element  such as  lt html gt    lt head gt  or  lt body gt   and it hasn t thrown an error along the way  we have an element  If the first ancestor is not attached to the document  we create an element and attempt to place the proposed element inside of it   and then remove it from the new element   So it either traces back to a known element  successfully attaches to a known element or fails  It returns the element or null if it is not an element

User · Answer

This might be of interest   function isElement obj      try         Using W3 DOM2  works for FF  Opera and Chrome      return obj instanceof HTMLElement        catch e         Browsers not supporting W3 DOM2 don t have HTMLElement and       an exception is thrown and we end up here  Testing some       properties that all elements have  works on IE7      return  typeof obj    object    amp  amp         obj nodeType   1   amp  amp   typeof obj style      object    amp  amp         typeof obj ownerDocument     object            It s part of the DOM  Level2   Update 2  This is how I implemented it in my own library   the previous code didn t work in Chrome  because Node and HTMLElement are functions instead of the expected object  This code is tested in FF3  IE7  Chrome 1 and Opera 9      Returns true if it is a DOM node function isNode o     return       typeof Node      object    o instanceof Node        o  amp  amp  typeof o      object   amp  amp  typeof o nodeType      number   amp  amp  typeof o nodeName    string            Returns true if it is a DOM element     function isElement o     return       typeof HTMLElement      object    o instanceof HTMLElement     DOM2     o  amp  amp  typeof o      object   amp  amp  o     null  amp  amp  o nodeType     1  amp  amp  typeof o nodeName    string

User · Answer

var isElement   function e       try             if e is an element attached to the DOM  we trace its lineage and use native functions to confirm its pedigree         var a    e   t  s  l   0  h   document getElementsByTagName  HEAD   0   ht   document getElementsByTagName  HTML   0           while l  document body amp  amp l  h amp  amp l parentNode  l   a a push l parentNode -1           t   a a length-1           s   document createElement  SCRIPT         safe to place anywhere and it won t show up         while a length gt 1       assume the top node is an element for now                var p   a pop   n   a a length-1               p insertBefore s n                     if s parentNode s parentNode removeChild s           if t  document body amp  amp t  h amp  amp t  ht                 the top node is not attached to the document  so we don t have to worry about it resetting any dynamic media                test the top node             document createElement  DIV   appendChild t  parentNode removeChild t           return e            catch e        return null      I tested this on Firefox  Safari  Chrome  Opera and IE9  I couldn t find a way to hack it  In theory  it tests every ancestor of the proposed element  as well as the element itself  by inserting a script tag before it  If its first ancestor traces back to a known element  such as  lt html gt    lt head gt  or  lt body gt   and it hasn t thrown an error along the way  we have an element  If the first ancestor is not attached to the document  we create an element and attempt to place the proposed element inside of it   and then remove it from the new element   So it either traces back to a known element  successfully attaches to a known element or fails  It returns the element or null if it is not an element

User · Answer

You could try appending it to a real DOM node     function isDom obj        var elm   document createElement  div        try               elm appendChild obj             catch  e                return false             return true

User · Answer

A absolute right method  check target is a real html element primary code        function  scope            if   scope window     May not run in window scope             return                    var HTMLElement   window HTMLElement    window Element   function                var tempDiv   document createElement  div            var isChildOf   function target  parent                 if   target                    return false                            if  parent    null                    parent   document body                            if  target     parent                    return true                            var newParent   target parentNode    target parentElement              if   newParent                    return false                            return isChildOf newParent  parent                                    The dom helper                     var Dom                                    Detect if target element is child element of parent                 param    target The target html node                 param    parent The the parent to check                 returns                                 IsChildOf  function  target  parent                    return isChildOf target  parent                                                 Detect target is html element                 param    target The target to check                 returns    True if target is html node                             IsHtmlElement  function  target                    if   X Dom IsHtmlNode target                         return false                                    return target nodeType     1                                                Detect target is html node                 param    target The target to check                 returns    True if target is html node                             IsHtmlNode function target                    if  target instanceof HTMLElement                        return true                                    if  target    null                        if  isChildOf target  document documentElement                             return true                                            try                           tempDiv appendChild target cloneNode false                            if  tempDiv childNodes length  gt  0                                tempDiv innerHTML                                   return true                                                  catch  e                                                             return false                                   X Dom   Dom         this

User · Answer

The only way to guarentee you re checking an actual HTMLEement  and not just an object with the same properties as an HTML Element  is to determine if it inherits from Node  since its impossible to make a new Node   in JavaScript   unless the native Node function is overwritten  but then you re out of luck   So    x000D   x000D  function isHTML obj    x000D      return obj instanceof Node  x000D    x000D   x000D  console log  x000D    isHTML test   x000D    isHTML ok   x000D    isHTML p   x000D    isHTML o   x000D    isHTML   x000D      constructor    x000D        name   HTML  x000D        x000D        x000D    isHTML   x000D        proto      x000D          proto      x000D            proto      x000D              proto      x000D              constructor    x000D                constructor     x000D                  name   Function  x000D                   x000D                   x000D                name   Node  x000D                x000D              x000D            x000D          x000D        x000D        x000D    x000D   lt div id test gt  lt  div gt  x000D   lt blockquote id  ok  gt  lt  blockquote gt  x000D   lt p id p gt  lt  p gt  x000D   lt br id o gt  x000D   lt  --think of anything else you want--  gt  x000D   x000D   x000D

User · Answer

I think that what you have to do is make a thorough check of some properties that will always be in a dom element  but their combination won t most likely be in another object  like so   var isDom   function  inp        return inp  amp  amp  inp tagName  amp  amp  inp nodeName  amp  amp  inp ownerDocument  amp  amp  inp removeAttribute

User · Answer

I think that what you have to do is make a thorough check of some properties that will always be in a dom element  but their combination won t most likely be in another object  like so   var isDom   function  inp        return inp  amp  amp  inp tagName  amp  amp  inp nodeName  amp  amp  inp ownerDocument  amp  amp  inp removeAttribute

User · Answer

Not to hammer on this or anything but for ES5-compliant browsers why not just   function isDOM e      return   HTML      Element   test Object prototype toString call e  slice 8  -1        Won t work on TextNodes and not sure about Shadow DOM or DocumentFragments etc  but will work on almost all HTML tag elements

User · Answer

This is from the lovely JavaScript library MooTools   if  obj nodeName       switch  obj nodeType       case 1  return  element       case 3  return    S   test obj nodeValue     textnode     whitespace

User · Answer

In Firefox  you can use the instanceof Node  That Node is defined in DOM1   But that is not that easy in IE     instanceof ActiveXObject  only can tell that it is a native object   typeof document body appendChild   object   tell that it may be DOM object  but also can be something else have same function    You can only ensure it is DOM element by using DOM function and catch if any exception  However  it may have side effect  e g  change object internal state performance memory leak

User · Answer

I have a special way to do this that has not yet been mentioned in the answers   My solution is based on four tests  If the object passes all four  then it is an element    The object is not null  The object has a method called  appendChild   The method  appendChild  was inherited from the Node class  and isn t just an imposter method  a user-created property with an identical name   The object is of Node Type 1  Element   Objects that inherit methods from the Node class are always Nodes  but not necessarily Elements    Q  How do I check if a given property is inherited and isn t just an imposter   A  A simple test to see if a method was truly inherited from Node is to first verify that the property has a type of  object  or  function   Next  convert the property to a string and check if the result contains the text   Native Code    If the result looks something like this   function appendChild     Native Code      Then the method has been inherited from the Node object  See https   davidwalsh name detect-native-function  And finally  bringing all the tests together  the solution is   function ObjectIsElement obj        var IsElem   true      if  obj    null            IsElem   false        else if  typeof obj appendChild      object   amp  amp  typeof obj appendChild      function               IE8 and below returns  object  when getting the type of a function  IE9  returns  function          IsElem   false        else if   obj appendChild       replace    r n t b f v xC2 xA0 x00- x1F x7F- x9F   ig      search      NativeCode    i     -1            IsElem   false        else if  obj nodeType    1            IsElem   false            return IsElem

User · Answer

Each DOMElement constructor returns function HTML   Element   or  Object HTML   Element  so      function isDOM getElem       if getElem   null  typeof getElem    undefined   return false      var c   getElem constructor toString        var html   c search  HTML     -1      var element   c search  Element     -1      return html amp  amp element

User · Answer

The using the root detection found here  we can determine whether e g  alert is a member of the object s root  which is then likely to be a window   function isInAnyDOM o       return  o     null   amp  amp     o ownerDocument  amp  amp   o ownerDocument defaultView    o ownerDocument parentWindow  alert      true false     To determine whether the object is the current window is even simpler   function isInCurrentDOM o       return  o     null   amp  amp    o ownerDocument  amp  amp   window      o ownerDocument defaultView    o ownerDocument parentWindow       true false     This seems to be less expensive than the try catch solution in the opening thread   Don P

User · Answer

This is from the lovely JavaScript library MooTools   if  obj nodeName       switch  obj nodeType       case 1  return  element       case 3  return    S   test obj nodeValue     textnode     whitespace

User · Answer

You could try appending it to a real DOM node     function isDom obj        var elm   document createElement  div        try               elm appendChild obj             catch  e                return false             return true

User · Answer

This is what I figured out   var isHTMLElement    function          if   HTMLElement  in window               Voil    Quick and easy  And reliable          return function  el   return el instanceof HTMLElement          else if   document createElement  a    constructor               We can access an element s constructor  So  this is not IE7         var ElementConstructors       nodeName          return function  el                return el  amp  amp  typeof el nodeName      string   amp  amp                    el instanceof   nodeName   el nodeName toLowerCase    in ElementConstructors                        ElementConstructors nodeName                          ElementConstructors nodeName     document createElement nodeName   constructor                    else              Not that reliable  but we don t seem to have another choice  Probably IE7         return function  el                return typeof el      object   amp  amp  el nodeType     1  amp  amp  typeof el nodeName      string                           To improve performance I created a self-invoking function that tests the browser s capabilities only once and assigns the appropriate function accordingly    The first test should work in most modern browsers and was already discussed here  It just tests if the element is an instance of HTMLElement  Very straightforward   The second one is the most interesting one  This is its core-functionality   return el instanceof  document createElement el nodeName   constructor   It tests whether el is an instance of the construcor it pretends to be  To do that  we need access to an element s contructor  That s why we re testing this in the if-Statement  IE7 for example fails this  because  document createElement  a    constructor is undefined in IE7   The problem with this approach is that document createElement is really not the fastest function and could easily slow down your application if you re testing a lot of elements with it  To solve this  I  decided to cache the constructors  The object ElementConstructors has nodeNames as keys with its corresponding constructors as values  If a constructor is already cached  it uses it from the cache  otherwise it creates the Element  caches its constructor for future access and then tests against it   The third test is the unpleasant fallback  It tests whether el is an object  has a nodeType property set to 1 and a string as nodeName  This is not very reliable of course  yet the vast majority of users shouldn t even fall back so far   This is the most reliable approach I came up with while still keeping performance as high as possible

User · Answer

In Firefox  you can use the instanceof Node  That Node is defined in DOM1   But that is not that easy in IE     instanceof ActiveXObject  only can tell that it is a native object   typeof document body appendChild   object   tell that it may be DOM object  but also can be something else have same function    You can only ensure it is DOM element by using DOM function and catch if any exception  However  it may have side effect  e g  change object internal state performance memory leak

User · Answer

All solutions above and below  my solution including  suffer from possibility of being incorrect  especially on IE  mdash  it is quite possible to  re define some objects methods properties to mimic a DOM node rendering the test invalid   So usually I use the duck-typing-style testing  I test specifically for things I use  For example  if I want to clone a node I test it like this   if typeof node     object   amp  amp   nodeType  in node  amp  amp     node nodeType     1  amp  amp  node cloneNode        most probably this is a DOM node  we can clone it safely   clonedNode   node cloneNode false       Basically it is a little sanity check   the direct test for a method  or a property  I am planning to use   Incidentally the test above is a good test for DOM nodes on all browsers  But if you want to be on the safe side always check the presence of methods and properties and verify their types   EDIT  IE uses ActiveX objects to represent nodes  so their properties do not behave as true JavaScript object  for example   console log typeof node cloneNode                   object console log node cloneNode instanceof Function      false   while it should return  function  and true respectively  The only way to test methods is to see if the are defined

User · Answer

Most answers use some kind of duck typing  checking for example that the object has a nodeType property  But that s not enough  because non-nodes can also have node-like properties   The other common approach is instanceof  which can produce false positives e g  with Object create Node   which is not a node despite inheriting node properties   Moreover  both approaches above call internal essential methods  which can be problematic e g  if the tested value is a proxy   Instead  what I recommend is borrowing a node method and calling it on our object  The browser will check that the value is a node probably by looking at internal slots not customizable in proxies  so even they won t be able to interfere with our check   function isNode value      try       Node prototype cloneNode call value  false       return true      catch err        return false          You can also use property getters  if you prefer    x000D   x000D  function isNode value    x000D    try   x000D      Object getOwnPropertyDescriptor Node prototype  nodeType   get call value   x000D      return true  x000D      catch err    x000D      return false  x000D      x000D    x000D   x000D   x000D    Similarly  if you want to test if a value is an element  you can use  function isElement value      try       Element prototype getAttribute call value           return true      catch err        return false            function isHTMLElement value      try       HTMLElement prototype click call value       return true      catch err        return false

User · Answer

I have a special way to do this that has not yet been mentioned in the answers   My solution is based on four tests  If the object passes all four  then it is an element    The object is not null  The object has a method called  appendChild   The method  appendChild  was inherited from the Node class  and isn t just an imposter method  a user-created property with an identical name   The object is of Node Type 1  Element   Objects that inherit methods from the Node class are always Nodes  but not necessarily Elements    Q  How do I check if a given property is inherited and isn t just an imposter   A  A simple test to see if a method was truly inherited from Node is to first verify that the property has a type of  object  or  function   Next  convert the property to a string and check if the result contains the text   Native Code    If the result looks something like this   function appendChild     Native Code      Then the method has been inherited from the Node object  See https   davidwalsh name detect-native-function  And finally  bringing all the tests together  the solution is   function ObjectIsElement obj        var IsElem   true      if  obj    null            IsElem   false        else if  typeof obj appendChild      object   amp  amp  typeof obj appendChild      function               IE8 and below returns  object  when getting the type of a function  IE9  returns  function          IsElem   false        else if   obj appendChild       replace    r n t b f v xC2 xA0 x00- x1F x7F- x9F   ig      search      NativeCode    i     -1            IsElem   false        else if  obj nodeType    1            IsElem   false            return IsElem

User · Answer

All solutions above and below  my solution including  suffer from possibility of being incorrect  especially on IE  mdash  it is quite possible to  re define some objects methods properties to mimic a DOM node rendering the test invalid   So usually I use the duck-typing-style testing  I test specifically for things I use  For example  if I want to clone a node I test it like this   if typeof node     object   amp  amp   nodeType  in node  amp  amp     node nodeType     1  amp  amp  node cloneNode        most probably this is a DOM node  we can clone it safely   clonedNode   node cloneNode false       Basically it is a little sanity check   the direct test for a method  or a property  I am planning to use   Incidentally the test above is a good test for DOM nodes on all browsers  But if you want to be on the safe side always check the presence of methods and properties and verify their types   EDIT  IE uses ActiveX objects to represent nodes  so their properties do not behave as true JavaScript object  for example   console log typeof node cloneNode                   object console log node cloneNode instanceof Function      false   while it should return  function  and true respectively  The only way to test methods is to see if the are defined

User · Answer

This is from the lovely JavaScript library MooTools   if  obj nodeName       switch  obj nodeType       case 1  return  element       case 3  return    S   test obj nodeValue     textnode     whitespace

User · Answer

For the ones using Angular   angular isElement   https   docs angularjs org api ng function angular isElement

User · Answer

I suggest a simple way to testing if a variable is an DOM element  function isDomEntity entity      if typeof entity       object   amp  amp  entity nodeType     undefined        return true        else       return false          or as HTMLGuy suggested   const isDomEntity   entity   gt      return typeof entity        object   amp  amp  entity nodeType     undefined

User · Answer

element instanceof    amp  amp  element get 0  instanceof Element     element instanceof Element   This will check for even if it is a jQuery or JavaScript DOM element

User · Answer

I think prototyping is not a very good solution but maybe this is the fastest one  Define this code block   Element prototype isDomElement   true  HTMLElement prototype isDomElement   true    than check your objects isDomElement property   if a isDomElement      I hope this helps

User · Answer

This is from the lovely JavaScript library MooTools   if  obj nodeName       switch  obj nodeType       case 1  return  element       case 3  return    S   test obj nodeValue     textnode     whitespace

User · Answer

differentiate a raw js object from a HTMLElement  function isDOM  x        return  HTML  test     toString call x          use     isDOM   a 1       false isDOM  document body      true      OR  Object defineProperty Object prototype   is                 value  function  x                return    toString call this  indexOf x   gt   0                      use   o     o is  HTML      false  o document body  o is  HTML      true

User · Answer

Perhaps this is an alternative  Tested in Opera 11  FireFox 6  Internet Explorer 8  Safari 5 and Google Chrome 16   function isDOMNode v      if   v   null   return false    if   typeof v    object    return false    if      nodeName  in v    return false      var nn   v nodeName    try          DOM node property nodeName is readonly         Most browsers throws an error        v nodeName    is readonly        catch  e               indicating v is a DOM node         return true              but others silently ignore the attempt to set the nodeName    if   v nodeName   nn   return true       Property nodeName set  and reset  - v is not a DOM node    v nodeName   nn     return false      Function won t be fooled by e g  this   isDOMNode    nodeName   fake         returns false

User · Answer

According to mdn     Element is the most general base class from which all objects in a Document inherit  It only has methods and properties common to all kinds of elements     We can implement isElement by prototype  Here is my advice    x000D   x000D      x000D      description detect if obj is an element x000D      param     obj x000D      returns  Boolean  x000D      example x000D     see below x000D      x000D  function isElement obj    x000D    if  typeof obj      object     x000D      return false x000D      x000D    let prototypeStr  prototype x000D    do   x000D      prototype   Object getPrototypeOf obj  x000D         to work in iframe x000D      prototypeStr   Object prototype toString call prototype  x000D           object Document   is used to detect document x000D      if   x000D        prototypeStr       object Element      x000D        prototypeStr       object Document   x000D          x000D        return true x000D        x000D      obj   prototype x000D         null is the terminal of object x000D      while  prototype     null  x000D    return false x000D    x000D  console log isElement document      true x000D  console log isElement document documentElement      true x000D  console log isElement document body      true x000D  console log isElement document getElementsByTagName  svg   0       true or false  decided by whether there is svg element x000D  console log isElement document getElementsByTagName  svg        false x000D  console log isElement document createDocumentFragment        false x000D   x000D   x000D

User · Answer

In Firefox  you can use the instanceof Node  That Node is defined in DOM1   But that is not that easy in IE     instanceof ActiveXObject  only can tell that it is a native object   typeof document body appendChild   object   tell that it may be DOM object  but also can be something else have same function    You can only ensure it is DOM element by using DOM function and catch if any exception  However  it may have side effect  e g  change object internal state performance memory leak

User · Answer

Test if obj inherits from Node   if  obj instanceof Node          obj is a DOM Object     Node is a basic Interface from which HTMLElement and Text inherit

User · Answer

This could be helpful  isDOM    -----------------------------------    Determines if the  obj parameter is a DOM element function isDOM  obj           DOM  Level2     if   HTMLElement  in window            return  obj  amp  amp  obj instanceof HTMLElement                Older browsers     return    obj  amp  amp  typeof obj      object   amp  amp  obj nodeType     1  amp  amp  obj nodeName       In the code above  we use the double negation operator to get the boolean value of the object passed as argument  this way we ensure that each expression evaluated in the conditional statement be boolean  taking advantage of the Short-Circuit Evaluation  thus the function returns true or false

User · Answer

I think prototyping is not a very good solution but maybe this is the fastest one  Define this code block   Element prototype isDomElement   true  HTMLElement prototype isDomElement   true    than check your objects isDomElement property   if a isDomElement      I hope this helps

User · Answer

The using the root detection found here  we can determine whether e g  alert is a member of the object s root  which is then likely to be a window   function isInAnyDOM o       return  o     null   amp  amp     o ownerDocument  amp  amp   o ownerDocument defaultView    o ownerDocument parentWindow  alert      true false     To determine whether the object is the current window is even simpler   function isInCurrentDOM o       return  o     null   amp  amp    o ownerDocument  amp  amp   window      o ownerDocument defaultView    o ownerDocument parentWindow       true false     This seems to be less expensive than the try catch solution in the opening thread   Don P

User · Answer

How about Lo-Dash s   isElement     npm install lodash iselement   And in the code   var isElement   require  lodash iselement    isElement document body

User · Answer

Each DOMElement constructor returns function HTML   Element   or  Object HTML   Element  so      function isDOM getElem       if getElem   null  typeof getElem    undefined   return false      var c   getElem constructor toString        var html   c search  HTML     -1      var element   c search  Element     -1      return html amp  amp element

User · Answer

old thread  but here s an updated possibility for ie8 and ff3 5 users   function isHTMLElement o        return  o constructor toString   search   object HTML  Element    gt  -1

User · Answer

This might be of interest   function isElement obj      try         Using W3 DOM2  works for FF  Opera and Chrome      return obj instanceof HTMLElement        catch e         Browsers not supporting W3 DOM2 don t have HTMLElement and       an exception is thrown and we end up here  Testing some       properties that all elements have  works on IE7      return  typeof obj    object    amp  amp         obj nodeType   1   amp  amp   typeof obj style      object    amp  amp         typeof obj ownerDocument     object            It s part of the DOM  Level2   Update 2  This is how I implemented it in my own library   the previous code didn t work in Chrome  because Node and HTMLElement are functions instead of the expected object  This code is tested in FF3  IE7  Chrome 1 and Opera 9      Returns true if it is a DOM node function isNode o     return       typeof Node      object    o instanceof Node        o  amp  amp  typeof o      object   amp  amp  typeof o nodeType      number   amp  amp  typeof o nodeName    string            Returns true if it is a DOM element     function isElement o     return       typeof HTMLElement      object    o instanceof HTMLElement     DOM2     o  amp  amp  typeof o      object   amp  amp  o     null  amp  amp  o nodeType     1  amp  amp  typeof o nodeName    string

User · Answer

I suggest a simple way to testing if a variable is an DOM element  function isDomEntity entity      if typeof entity       object   amp  amp  entity nodeType     undefined        return true        else       return false          or as HTMLGuy suggested   const isDomEntity   entity   gt      return typeof entity        object   amp  amp  entity nodeType     undefined

User · Answer

if you are using jQuery  try this      lt div gt    is         true    tagName   a    is         false       is         false       is         false   0  is         false   NaN  is         false

User · Answer

You could try appending it to a real DOM node     function isDom obj        var elm   document createElement  div        try               elm appendChild obj             catch  e                return false             return true

User · Answer

old thread  but here s an updated possibility for ie8 and ff3 5 users   function isHTMLElement o        return  o constructor toString   search   object HTML  Element    gt  -1

User · Answer

You can see if the object or node in question returns a string type   typeof  array  innerHTML      string    gt  false typeof  object  innerHTML      string    gt  false typeof  number  innerHTML      string    gt  false typeof  text  innerHTML      string    gt  false    any DOM element will test as true typeof  HTML object  innerHTML      string    gt  true typeof  document createElement  anything    innerHTML      string    gt  true

User · Answer

According to mdn     Element is the most general base class from which all objects in a Document inherit  It only has methods and properties common to all kinds of elements     We can implement isElement by prototype  Here is my advice    x000D   x000D      x000D      description detect if obj is an element x000D      param     obj x000D      returns  Boolean  x000D      example x000D     see below x000D      x000D  function isElement obj    x000D    if  typeof obj      object     x000D      return false x000D      x000D    let prototypeStr  prototype x000D    do   x000D      prototype   Object getPrototypeOf obj  x000D         to work in iframe x000D      prototypeStr   Object prototype toString call prototype  x000D           object Document   is used to detect document x000D      if   x000D        prototypeStr       object Element      x000D        prototypeStr       object Document   x000D          x000D        return true x000D        x000D      obj   prototype x000D         null is the terminal of object x000D      while  prototype     null  x000D    return false x000D    x000D  console log isElement document      true x000D  console log isElement document documentElement      true x000D  console log isElement document body      true x000D  console log isElement document getElementsByTagName  svg   0       true or false  decided by whether there is svg element x000D  console log isElement document getElementsByTagName  svg        false x000D  console log isElement document createDocumentFragment        false x000D   x000D   x000D

User · Answer

All solutions above and below  my solution including  suffer from possibility of being incorrect  especially on IE  mdash  it is quite possible to  re define some objects methods properties to mimic a DOM node rendering the test invalid   So usually I use the duck-typing-style testing  I test specifically for things I use  For example  if I want to clone a node I test it like this   if typeof node     object   amp  amp   nodeType  in node  amp  amp     node nodeType     1  amp  amp  node cloneNode        most probably this is a DOM node  we can clone it safely   clonedNode   node cloneNode false       Basically it is a little sanity check   the direct test for a method  or a property  I am planning to use   Incidentally the test above is a good test for DOM nodes on all browsers  But if you want to be on the safe side always check the presence of methods and properties and verify their types   EDIT  IE uses ActiveX objects to represent nodes  so their properties do not behave as true JavaScript object  for example   console log typeof node cloneNode                   object console log node cloneNode instanceof Function      false   while it should return  function  and true respectively  The only way to test methods is to see if the are defined

User · Answer

The easiest and cross-browser way to detect if an element is part of HTML DOM is as below   function inHTMLDom myelement       if myelement ownerDocument documentElement tagName toLowerCase     html            return true       else          return false           inHTMLDom  lt your element gt        lt your element gt  element you are interested in checking    tested in IE6 IE7 IE8 IE9 IE10 FF Chrome Safari Opera

User · Answer

Test if obj inherits from Node   if  obj instanceof Node          obj is a DOM Object     Node is a basic Interface from which HTMLElement and Text inherit

User · Answer

In Firefox  you can use the instanceof Node  That Node is defined in DOM1   But that is not that easy in IE     instanceof ActiveXObject  only can tell that it is a native object   typeof document body appendChild   object   tell that it may be DOM object  but also can be something else have same function    You can only ensure it is DOM element by using DOM function and catch if any exception  However  it may have side effect  e g  change object internal state performance memory leak

User · Answer

I think that what you have to do is make a thorough check of some properties that will always be in a dom element  but their combination won t most likely be in another object  like so   var isDom   function  inp        return inp  amp  amp  inp tagName  amp  amp  inp nodeName  amp  amp  inp ownerDocument  amp  amp  inp removeAttribute

User · Answer

A absolute right method  check target is a real html element primary code        function  scope            if   scope window     May not run in window scope             return                    var HTMLElement   window HTMLElement    window Element   function                var tempDiv   document createElement  div            var isChildOf   function target  parent                 if   target                    return false                            if  parent    null                    parent   document body                            if  target     parent                    return true                            var newParent   target parentNode    target parentElement              if   newParent                    return false                            return isChildOf newParent  parent                                    The dom helper                     var Dom                                    Detect if target element is child element of parent                 param    target The target html node                 param    parent The the parent to check                 returns                                 IsChildOf  function  target  parent                    return isChildOf target  parent                                                 Detect target is html element                 param    target The target to check                 returns    True if target is html node                             IsHtmlElement  function  target                    if   X Dom IsHtmlNode target                         return false                                    return target nodeType     1                                                Detect target is html node                 param    target The target to check                 returns    True if target is html node                             IsHtmlNode function target                    if  target instanceof HTMLElement                        return true                                    if  target    null                        if  isChildOf target  document documentElement                             return true                                            try                           tempDiv appendChild target cloneNode false                            if  tempDiv childNodes length  gt  0                                tempDiv innerHTML                                   return true                                                  catch  e                                                             return false                                   X Dom   Dom         this

User · Answer

All solutions above and below  my solution including  suffer from possibility of being incorrect  especially on IE  mdash  it is quite possible to  re define some objects methods properties to mimic a DOM node rendering the test invalid   So usually I use the duck-typing-style testing  I test specifically for things I use  For example  if I want to clone a node I test it like this   if typeof node     object   amp  amp   nodeType  in node  amp  amp     node nodeType     1  amp  amp  node cloneNode        most probably this is a DOM node  we can clone it safely   clonedNode   node cloneNode false       Basically it is a little sanity check   the direct test for a method  or a property  I am planning to use   Incidentally the test above is a good test for DOM nodes on all browsers  But if you want to be on the safe side always check the presence of methods and properties and verify their types   EDIT  IE uses ActiveX objects to represent nodes  so their properties do not behave as true JavaScript object  for example   console log typeof node cloneNode                   object console log node cloneNode instanceof Function      false   while it should return  function  and true respectively  The only way to test methods is to see if the are defined

User · Answer

here s a trick using jQuery  var obj       var element   document getElementById  myId       or simply     myId      obj  html      undefined    true   element  html      undefined    false   so putting it in a function   function isElement obj       return  typeOf obj      object   amp  amp      obj  html      undefined

User · Answer

This might be of interest   function isElement obj      try         Using W3 DOM2  works for FF  Opera and Chrome      return obj instanceof HTMLElement        catch e         Browsers not supporting W3 DOM2 don t have HTMLElement and       an exception is thrown and we end up here  Testing some       properties that all elements have  works on IE7      return  typeof obj    object    amp  amp         obj nodeType   1   amp  amp   typeof obj style      object    amp  amp         typeof obj ownerDocument     object            It s part of the DOM  Level2   Update 2  This is how I implemented it in my own library   the previous code didn t work in Chrome  because Node and HTMLElement are functions instead of the expected object  This code is tested in FF3  IE7  Chrome 1 and Opera 9      Returns true if it is a DOM node function isNode o     return       typeof Node      object    o instanceof Node        o  amp  amp  typeof o      object   amp  amp  typeof o nodeType      number   amp  amp  typeof o nodeName    string            Returns true if it is a DOM element     function isElement o     return       typeof HTMLElement      object    o instanceof HTMLElement     DOM2     o  amp  amp  typeof o      object   amp  amp  o     null  amp  amp  o nodeType     1  amp  amp  typeof o nodeName    string

User · Answer

You could try appending it to a real DOM node     function isDom obj        var elm   document createElement  div        try               elm appendChild obj             catch  e                return false             return true

User · Answer

This is what I figured out   var isHTMLElement    function          if   HTMLElement  in window               Voil    Quick and easy  And reliable          return function  el   return el instanceof HTMLElement          else if   document createElement  a    constructor               We can access an element s constructor  So  this is not IE7         var ElementConstructors       nodeName          return function  el                return el  amp  amp  typeof el nodeName      string   amp  amp                    el instanceof   nodeName   el nodeName toLowerCase    in ElementConstructors                        ElementConstructors nodeName                          ElementConstructors nodeName     document createElement nodeName   constructor                    else              Not that reliable  but we don t seem to have another choice  Probably IE7         return function  el                return typeof el      object   amp  amp  el nodeType     1  amp  amp  typeof el nodeName      string                           To improve performance I created a self-invoking function that tests the browser s capabilities only once and assigns the appropriate function accordingly    The first test should work in most modern browsers and was already discussed here  It just tests if the element is an instance of HTMLElement  Very straightforward   The second one is the most interesting one  This is its core-functionality   return el instanceof  document createElement el nodeName   constructor   It tests whether el is an instance of the construcor it pretends to be  To do that  we need access to an element s contructor  That s why we re testing this in the if-Statement  IE7 for example fails this  because  document createElement  a    constructor is undefined in IE7   The problem with this approach is that document createElement is really not the fastest function and could easily slow down your application if you re testing a lot of elements with it  To solve this  I  decided to cache the constructors  The object ElementConstructors has nodeNames as keys with its corresponding constructors as values  If a constructor is already cached  it uses it from the cache  otherwise it creates the Element  caches its constructor for future access and then tests against it   The third test is the unpleasant fallback  It tests whether el is an object  has a nodeType property set to 1 and a string as nodeName  This is not very reliable of course  yet the vast majority of users shouldn t even fall back so far   This is the most reliable approach I came up with while still keeping performance as high as possible

User · Answer

You can see if the object or node in question returns a string type   typeof  array  innerHTML      string    gt  false typeof  object  innerHTML      string    gt  false typeof  number  innerHTML      string    gt  false typeof  text  innerHTML      string    gt  false    any DOM element will test as true typeof  HTML object  innerHTML      string    gt  true typeof  document createElement  anything    innerHTML      string    gt  true

User · Answer

This might be of interest   function isElement obj      try         Using W3 DOM2  works for FF  Opera and Chrome      return obj instanceof HTMLElement        catch e         Browsers not supporting W3 DOM2 don t have HTMLElement and       an exception is thrown and we end up here  Testing some       properties that all elements have  works on IE7      return  typeof obj    object    amp  amp         obj nodeType   1   amp  amp   typeof obj style      object    amp  amp         typeof obj ownerDocument     object            It s part of the DOM  Level2   Update 2  This is how I implemented it in my own library   the previous code didn t work in Chrome  because Node and HTMLElement are functions instead of the expected object  This code is tested in FF3  IE7  Chrome 1 and Opera 9      Returns true if it is a DOM node function isNode o     return       typeof Node      object    o instanceof Node        o  amp  amp  typeof o      object   amp  amp  typeof o nodeType      number   amp  amp  typeof o nodeName    string            Returns true if it is a DOM element     function isElement o     return       typeof HTMLElement      object    o instanceof HTMLElement     DOM2     o  amp  amp  typeof o      object   amp  amp  o     null  amp  amp  o nodeType     1  amp  amp  typeof o nodeName    string

User · Answer

This could be helpful  isDOM    -----------------------------------    Determines if the  obj parameter is a DOM element function isDOM  obj           DOM  Level2     if   HTMLElement  in window            return  obj  amp  amp  obj instanceof HTMLElement                Older browsers     return    obj  amp  amp  typeof obj      object   amp  amp  obj nodeType     1  amp  amp  obj nodeName       In the code above  we use the double negation operator to get the boolean value of the object passed as argument  this way we ensure that each expression evaluated in the conditional statement be boolean  taking advantage of the Short-Circuit Evaluation  thus the function returns true or false

User · Answer

element instanceof    amp  amp  element get 0  instanceof Element     element instanceof Element   This will check for even if it is a jQuery or JavaScript DOM element

User · Answer

Perhaps this is an alternative  Tested in Opera 11  FireFox 6  Internet Explorer 8  Safari 5 and Google Chrome 16   function isDOMNode v      if   v   null   return false    if   typeof v    object    return false    if      nodeName  in v    return false      var nn   v nodeName    try          DOM node property nodeName is readonly         Most browsers throws an error        v nodeName    is readonly        catch  e               indicating v is a DOM node         return true              but others silently ignore the attempt to set the nodeName    if   v nodeName   nn   return true       Property nodeName set  and reset  - v is not a DOM node    v nodeName   nn     return false      Function won t be fooled by e g  this   isDOMNode    nodeName   fake         returns false

User · Answer

The following IE8 compatible  super-simple code works perfectly   The accepted answer does not detect all types of HTML elements  For example  SVG elements are not supported  In contrast  this answer works for HTML well as SVG   See it in action here  https   jsfiddle net eLuhbu6r   function isElement element        return element instanceof Element    element instanceof HTMLDocument

User · Answer

No need for hacks  you can just ask if an element is an instance of the DOM Element   const isDOM   el   gt  el instanceof Element

User · Answer

No need for hacks  you can just ask if an element is an instance of the DOM Element   const isDOM   el   gt  el instanceof Element

User · Answer

This will work for almost any browser   No distinction between elements and nodes here   function dom element check element       if  typeof element nodeType      undefined            return true            return false

User · Answer

The only way to guarentee you re checking an actual HTMLEement  and not just an object with the same properties as an HTML Element  is to determine if it inherits from Node  since its impossible to make a new Node   in JavaScript   unless the native Node function is overwritten  but then you re out of luck   So    x000D   x000D  function isHTML obj    x000D      return obj instanceof Node  x000D    x000D   x000D  console log  x000D    isHTML test   x000D    isHTML ok   x000D    isHTML p   x000D    isHTML o   x000D    isHTML   x000D      constructor    x000D        name   HTML  x000D        x000D        x000D    isHTML   x000D        proto      x000D          proto      x000D            proto      x000D              proto      x000D              constructor    x000D                constructor     x000D                  name   Function  x000D                   x000D                   x000D                name   Node  x000D                x000D              x000D            x000D          x000D        x000D        x000D    x000D   lt div id test gt  lt  div gt  x000D   lt blockquote id  ok  gt  lt  blockquote gt  x000D   lt p id p gt  lt  p gt  x000D   lt br id o gt  x000D   lt  --think of anything else you want--  gt  x000D   x000D   x000D

User · Answer

How about Lo-Dash s   isElement     npm install lodash iselement   And in the code   var isElement   require  lodash iselement    isElement document body

User · Answer

if you are using jQuery  try this      lt div gt    is         true    tagName   a    is         false       is         false       is         false   0  is         false   NaN  is         false

User · Answer

here s a trick using jQuery  var obj       var element   document getElementById  myId       or simply     myId      obj  html      undefined    true   element  html      undefined    false   so putting it in a function   function isElement obj       return  typeOf obj      object   amp  amp      obj  html      undefined

User · Answer

The easiest and cross-browser way to detect if an element is part of HTML DOM is as below   function inHTMLDom myelement       if myelement ownerDocument documentElement tagName toLowerCase     html            return true       else          return false           inHTMLDom  lt your element gt        lt your element gt  element you are interested in checking    tested in IE6 IE7 IE8 IE9 IE10 FF Chrome Safari Opera

User · Answer

Not to hammer on this or anything but for ES5-compliant browsers why not just   function isDOM e      return   HTML      Element   test Object prototype toString call e  slice 8  -1        Won t work on TextNodes and not sure about Shadow DOM or DocumentFragments etc  but will work on almost all HTML tag elements

User · Answer

For the ones using Angular   angular isElement   https   docs angularjs org api ng function angular isElement

User · Answer

var IsPlainObject   function   obj     return obj instanceof Object  amp  amp      obj instanceof Function    obj toString          object Object      obj constructor name      Object            IsDOMObject   function   obj     return obj instanceof EventTarget         IsDOMElement   function   obj     return obj instanceof Node         IsListObject   function   obj     return obj instanceof Array    obj instanceof NodeList          In fact I am more likely t use these inline  but sometimes it is good to have these shortcuts for setup code

User · Answer

differentiate a raw js object from a HTMLElement  function isDOM  x        return  HTML  test     toString call x          use     isDOM   a 1       false isDOM  document body      true      OR  Object defineProperty Object prototype   is                 value  function  x                return    toString call this  indexOf x   gt   0                      use   o     o is  HTML      false  o document body  o is  HTML      true

User · Answer

Most answers use some kind of duck typing  checking for example that the object has a nodeType property  But that s not enough  because non-nodes can also have node-like properties   The other common approach is instanceof  which can produce false positives e g  with Object create Node   which is not a node despite inheriting node properties   Moreover  both approaches above call internal essential methods  which can be problematic e g  if the tested value is a proxy   Instead  what I recommend is borrowing a node method and calling it on our object  The browser will check that the value is a node probably by looking at internal slots not customizable in proxies  so even they won t be able to interfere with our check   function isNode value      try       Node prototype cloneNode call value  false       return true      catch err        return false          You can also use property getters  if you prefer    x000D   x000D  function isNode value    x000D    try   x000D      Object getOwnPropertyDescriptor Node prototype  nodeType   get call value   x000D      return true  x000D      catch err    x000D      return false  x000D      x000D    x000D   x000D   x000D    Similarly  if you want to test if a value is an element  you can use  function isElement value      try       Element prototype getAttribute call value           return true      catch err        return false            function isHTMLElement value      try       HTMLElement prototype click call value       return true      catch err        return false

User · Answer

This will work for almost any browser   No distinction between elements and nodes here   function dom element check element       if  typeof element nodeType      undefined            return true            return false

User · Answer

I think that what you have to do is make a thorough check of some properties that will always be in a dom element  but their combination won t most likely be in another object  like so   var isDom   function  inp        return inp  amp  amp  inp tagName  amp  amp  inp nodeName  amp  amp  inp ownerDocument  amp  amp  inp removeAttribute

User · Answer

The following IE8 compatible  super-simple code works perfectly   The accepted answer does not detect all types of HTML elements  For example  SVG elements are not supported  In contrast  this answer works for HTML well as SVG   See it in action here  https   jsfiddle net eLuhbu6r   function isElement element        return element instanceof Element    element instanceof HTMLDocument

User · Answer

var IsPlainObject   function   obj     return obj instanceof Object  amp  amp      obj instanceof Function    obj toString          object Object      obj constructor name      Object            IsDOMObject   function   obj     return obj instanceof EventTarget         IsDOMElement   function   obj     return obj instanceof Node         IsListObject   function   obj     return obj instanceof Array    obj instanceof NodeList          In fact I am more likely t use these inline  but sometimes it is good to have these shortcuts for setup code

[javascript] How do you check if a JavaScript Object is a DOM Object?

Examples related to javascript

Examples related to dom

Examples related to object