How can I check if an element exists in the visible DOM

Question

How do you test an element for existence without the use of the getElementById method   I have set up a live demo for reference  I will also print the code on here as well    lt  DOCTYPE html gt   lt html gt   lt head gt       lt script gt      var getRandomID   function  size                var str                       i   0                  chars    0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ               while  i  lt  size                    str    chars substr Math floor Math random     62   1                   i                              return str                     isNull   function  element                var randomID   getRandomID 12                   savedID    element id   element id   null              element id   randomID              var foundElm   document getElementById randomID               element removeAttribute  id                if  savedID     null                    element id   savedID                            return  foundElm    false   true                 window onload   function              var image   document getElementById  demo            console log  undefined    typeof image      undefined     true   false      false         console log  null    image     null    true   false      false         console log  find-by-id   isNull image       false         image parentNode removeChild image           console log  undefined    typeof image      undefined     true   false      false   should be true          console log  null    image     null    true   false      false   should be true          console log  find-by-id   isNull image       true   correct but there must be a better way than this              lt  script gt   lt  head gt   lt body gt       lt div id  demo  gt  lt  div gt   lt  body gt   lt  html gt    Basically the above code demonstrates an element being stored into a variable and then removed from the DOM  Even though the element has been removed from the DOM  the variable retains the element as it was when first declared  In other words  it is not a live reference to the element itself  but rather a replica  As a result  checking the variable s value  the element  for existence will provide an unexpected result   The isNull function is my attempt to check for an elements existence from a variable  and it works  but I would like to know if there is an easier way to accomplish the same result   PS  I m also interested in why JavaScript variables behave like this if anyone knows of some good articles related to the subject

User · Answer

As I landed up here due to the question  Few of the solutions from above don t solve the problem  After a few lookups  I found a solution on the internet that provided if a node is present in the current viewport where the answers I tried solves of it s present in the body or not  function isInViewport element        const rect   element getBoundingClientRect        return           rect top  gt   0  amp  amp          rect left  gt   0  amp  amp          rect bottom  lt    window innerHeight    document documentElement clientHeight   amp  amp          rect right  lt    window innerWidth    document documentElement clientWidth            isInViewport document querySelector   selector-i-am-looking-for      The snippet is taken from HERE to keep as a backup as the links may be unavailable after some time  Check the link for an explanation  And  didn t intend to post in the comment  as in most cases  they are ignored

User · Answer

This code works for me  and I didn t have any issues with it        if document getElementById  mySPAN                 If the element exists  execute this code         alert  Element exists              else              If the element does not exist execute this code         alert  Element does not exists

User · Answer

I simply do   if document getElementById  myElementId         alert  Element exists      else       alert  Element does not exist        It works for me and had no issues with it yet

User · Answer

Using the Node contains DOM API  you can check for the presence of any element in the page  currently in the DOM  quite easily   document body contains YOUR ELEMENT HERE     CROSS-BROWSER NOTE  the document object in Internet nbsp Explorer does not have a contains   method - to ensure cross-browser compatibility  use document body contains   instead

User · Answer

You can also use jQuery contains  which checks if an element is a descendant of another element  I passed in document as the parent element to search because any elements that exist on the page DOM are a descendant of document   jQuery contains  document  YOUR ELEMENT

User · Answer

I prefer to use the node isConnected property  Visit MDN   Note  This will return true if the element is appended to a ShadowRoot as well  which might not be everyone s desired behaviour  Example  const element   document createElement  div    console log element isConnected      Returns false document body append element   console log element isConnected      Returns true

User · Answer

You could just check to see if the parentNode property is null   That is   if  myElement parentNode           The node is NOT in the DOM   else          The element is in the DOM

User · Answer

If an element is in the DOM  its parents should also be in And the last grandparent should be the document   So to check that we just loop unto the element s parentNode tree until we reach the last grandparent  Use this           param  HTMLElement  element - The element to check     param  boolean      inBody  - Checks if the element is in the body     return  boolean      var isInDOM   function element  inBody        var     element  last       while               last              if  inBody  amp  amp  last     document body    break                 parentNode             return inBody   last     document body   last     document

User · Answer

I liked this approach   var elem   document getElementById  elementID     if  elem      do this else     do that   Also  var elem     document getElementById  elemID      true false    if  elem      do this else     do that

User · Answer

Instead of iterating parents  you can just get the bounding rectangle which is all zeros when the element is detached from the DOM   function isInDOM element        if   element          return false      var rect   element getBoundingClientRect        return  rect top    rect left    rect height    rect width  true false      If you want to handle the edge case of a zero width and height element at zero top and zero left  you can double check by iterating parents till the document body   function isInDOM element        if   element          return false      var rect   element getBoundingClientRect        if  element top    element left    element height    element width          return true      while element            if  element    document body              return true          element   element parentNode            return false

User · Answer

A simple solution with jQuery      body   find yourElement  0     null

User · Answer

Use querySelectorAll with forEach   document querySelectorAll   my-element   forEach  element    gt      element classList add  new-class          as the opposite of   const myElement   document querySelector   my-element    if  myElement      element classList add  new-class

User · Answer

Try the following  It is the most reliable solution   window getComputedStyle x  display         For example   var x   document createElement  html   var y   document createElement  body   var z   document createElement  div   x appendChild y   y appendChild z    z style display    block    console log z closest  html      null       false  console log z style display       block  console log window getComputedStyle z  display             true

User · Answer

Check if the element is a child of  lt html gt  via Node  contains     const div   document createElement  div    document documentElement contains div     - gt  false  document body appendChild div   document documentElement contains div     - gt  true   I ve covered this and more in is-dom-detached

User · Answer

Use this command below to return whether or not the element exists in the DOM  return   document getElementById  myElement

User · Answer

It seems some people are landing here  and simply want to know if an element exists  a little bit different to the original question    That s as simple as using any of the browser s selecting method  and checking it for a truthy value  generally    For example  if my element had an id of  find-me   I could simply use     var elementExists   document getElementById  find-me      This is specified to either return a reference to the element or null  If you must have a Boolean value  simply toss a    before the method call   In addition  you can use some of the many other methods that exist for finding elements  such as  all living off document     querySelector   querySelectorAll   getElementsByClassName   getElementsByName     Some of these methods return a NodeList  so be sure to check its length property  because a NodeList is an object  and therefore truthy     For actually determining if an element exists as part of the visible DOM  like the question originally asked   Csuwldcat provides a better solution than rolling your own  as this answer used to contain   That is  to use the contains   method on DOM elements   You could use it like so     document body contains someReferenceToADomElement

User · Answer

A simple way to check if an element exist can be done through one-line code of jQuery   Here is the code below   if      elementId   length  gt  0           Do stuff here if the element exists   else          Do stuff here if the element does not exist

User · Answer

Use getElementById   if it s available   Also  here s an easy way to do it with jQuery   if      elementId   length  gt  0         Exists      And if you can t use third-party libraries  just stick to base JavaScript   var element    document getElementById  elementId    if  typeof element      undefined   amp  amp  element    null         Exists

User · Answer

Another option is element closest   element closest  body       null

User · Answer

Check element exist or not const elementExists   document getElementById  quot find-me quot    if elementExists       console log  quot have this element quot     else      console log  quot this element doesn t exist quot

User · Answer

From Mozilla Developer Network   This function checks to see if an element is in the page s body  As contains   is inclusive and determining if the body contains itself isn t the intention of isInPage  this case explicitly returns false   function isInPage node      return  node     document body    false   document body contains node       node is the node we want to check for in the  lt body

User · Answer

The easiest solution is to check the baseURI property  which is set only when the element is inserted in the DOM  and it reverts to an empty string when it is removed    x000D   x000D  var div   document querySelector  div    x000D   x000D      div  is in the DOM  so should print a string x000D  console log div baseURI   x000D   x000D     Remove  div  from the DOM x000D  document body removeChild div   x000D   x000D     Should print an empty string x000D  console log div baseURI   x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

csuwldcat s solution seems to be the best of the bunch  but a slight modification is needed to make it work correctly with an element that s in a different document than the JavaScript code is running in  such as an iframe   YOUR ELEMENT ownerDocument body contains YOUR ELEMENT     Note the use of the element s ownerDocument property  as opposed to just plain old document  which may or may not refer to the element s owner document    torazaburo posted an even simpler method that also works with non-local elements  but unfortunately  it uses the baseURI property  which is not uniformly implemented across browsers at this time  I could only get it to work in the WebKit-based ones   I couldn t find any other element or node properties that could be used in a similar fashion  so I think for the time being the above solution is as good as it gets

User · Answer

this condition chick all cases      x000D   x000D  function del     x000D    chick if dom has this element  x000D    if not true condition means null or undifind or false   x000D   x000D  if   document querySelector   ul list      true   x000D   x000D     msg to user x000D      alert  click btn load     x000D   x000D     if console chick for you and show null clear console  x000D      console clear    x000D   x000D     the function will stop  x000D      return false  x000D    x000D   x000D     if its true function will log delet   x000D  console log  delet    x000D   x000D    x000D   x000D   x000D

User · Answer

All existing elements have parentElement set  except the HTML element   function elExists  e         return  e nodeName      HTML     e parentElement     null

User · Answer

This will work prefectly in all  D function basedInDocument el            This function is used for checking if this element in the real DOM     while  el parentElement    null            if  el parentElement    document body                return true                    el   el parentElement     For checking the parent of           If the loop breaks  it will return false  meaning          the element is not in the real DOM       return false

User · Answer

jQuery solution   if      elementId   length           element exists  do something        This worked for me using jQuery and did not require     elementId   0  to be used

[javascript] How can I check if an element exists in the visible DOM?

Examples related to javascript

Examples related to dom

Examples related to variables

Examples related to element

Examples related to exists