How to check if element has any children in Javascript

Question

Simple question  I have an element which I am grabbing via  getElementById     How do I check if it has any children

User · Answer

lt script type  text javascript  gt   function uwtPBSTree NodeChecked treeId  nodeId  bChecked           debugger      var selectedNode   igtree getNodeById nodeId       var ParentNodes   selectedNode getChildNodes         var length   ParentNodes length       if  bChecked                           if  length    0                        for  i   0  i  lt  length  i                              ParentNodes i  setChecked true                                           else                if  length    0                         for  i   0  i  lt  length  i                                   ParentNodes i  setChecked false                                    lt  script gt    lt ignav UltraWebTree ID  uwtPBSTree  runat  server            gt   lt ClientSideEvents NodeChecked  uwtPBSTree NodeChecked  gt  lt  ClientSideEvents gt   lt  ignav UltraWebTree gt

User · Answer

Try the childElementCount property   if   element childElementCount     0          alert  i have children      else         alert  no kids here

User · Answer

As slashnick  amp  bobince mention  hasChildNodes   will return true for whitespace  text nodes    However  I didn t want this behaviour  and this worked for me     element getElementsByTagName      length  gt  0   Edit  for the same functionality  this is a better solution    element children length  gt  0   children   is a subset of childNodes    containing elements only   Compatibility

User · Answer

A reusable isEmpty   lt selector gt    function  You can also run it toward a collection of elements  see example    x000D   x000D  const isEmpty   sel   gt  x000D            document querySelectorAll sel   some el   gt  el innerHTML trim            x000D   x000D  console log  x000D    isEmpty   one       false x000D    isEmpty   two       true x000D    isEmpty   foo       false x000D    isEmpty   bar       true x000D     x000D   lt div id  one  gt  x000D   foo x000D   lt  div gt  x000D   x000D   lt div id  two  gt  x000D    x000D   lt  div gt  x000D   x000D   lt div class  foo  gt  lt  div gt  x000D   lt div class  foo  gt  lt p gt foo lt  p gt  lt  div gt  x000D   lt div class  foo  gt  lt  div gt  x000D   x000D   lt div class  bar  gt  lt  div gt  x000D   lt div class  bar  gt  lt  div gt  x000D   lt div class  bar  gt  lt  div gt  x000D   x000D   x000D    returns true  and exits loop  as soon one element has any kind of content  beside spaces or newlines

User · Answer

A couple of ways  if  element firstChild           It has at least one    or the hasChildNodes   function  if  element hasChildNodes             It has at least one    or the length property of childNodes  if  element childNodes length  gt  0       Or just  if  element childNodes length          It has at least one    If you only want to know about child elements  as opposed to text nodes  attribute nodes  etc   on all modern browsers  and IE8      in fact  even IE6  you can do this   thank you Florian   if  element children length  gt  0       Or just  if  element children length          It has at least one element as a child    That relies on the children property  which wasn t defined in DOM1  DOM2  or DOM3  but which has near-universal support   It works in IE6 and up and Chrome  Firefox  and Opera at least as far back as November 2012  when this was originally written   If supporting older mobile devices  be sure to check for support  If you don t need IE8 and earlier support  you can also do this  if  element firstElementChild           It has at least one element as a child    That relies on firstElementChild  Like children  it wasn t defined in DOM1-3 either  but unlike children it wasn t added to IE until IE9  The same applies to childElementCount  if  element childElementCount     0           It has at least one element as a child    If you want to stick to something defined in DOM1  maybe you have to support really obscure browsers   you have to do more work  var hasChildElements  child  hasChildElements   false  for  child   element firstChild  child  child   child nextSibling        if  child nodeType    1       1    Element         hasChildElements   true          break           All of that is part of DOM1  and nearly universally supported  It would be easy to wrap this up in a function  e g   function hasChildElement elm        var child  rv       if  elm children               Supports  children          rv   elm children length     0        else              The hard way            rv   false          for  child   element firstChild   rv  amp  amp  child  child   child nextSibling                if  child nodeType    1       1    Element                 rv   true                                    return rv

User · Answer

Late but document fragment could be a node   function hasChild el       var child   el  amp  amp  el firstChild      while  child            if  child nodeType     1    child nodeType     11                return true                    child   child nextSibling            return false       or function hasChild el       for  var i   0  el  amp  amp  el childNodes i   i              if  el childNodes i  nodeType     1    el childNodes i  nodeType     11                return true                      return false      See  https   github com k-gun so blob master so dom js L42 https   github com k-gun so blob master so dom js L741

User · Answer

You could also do the following  if  element innerHTML trim                    It has at least one     This uses the trim   method to treat empty elements which have only whitespaces  in which case hasChildNodes returns true  as being empty  NB  The above method doesn t filter out comments   so a comment would classify a a child  To filter out comments as well  we could make use of the read-only Node nodeType property where Node COMMENT NODE  A Comment node  such as  lt  --     -- gt   has the constant value -    8 if  element firstChild  nodeType     8  amp  amp  element innerHTML trim                  It has at least one     x000D   x000D  let divs   document querySelectorAll  div    for element of divs      if  element firstChild  nodeType     8  amp  amp  element innerHTML trim                console log  has children       else   console log  no children       x000D   lt div gt  lt span gt An element lt  span gt   lt div gt some text lt  div gt   lt div gt       lt  div gt   lt  -- whitespace -- gt   lt div gt  lt  -- A comment -- gt  lt  div gt   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can check if the element has child nodes element hasChildNodes     Beware in Mozilla this will return true if the is whitespace after the tag so you will need to verify the tag type   https   developer mozilla org En DOM Node hasChildNodes

[javascript] How to check if element has any children in Javascript?

Examples related to javascript

Examples related to dom