How to get child element by class name

Question

I m trying to get the child span that has a class   4  Here is an example element    lt div id  test  gt    lt span class  one  gt  lt  span gt    lt span class  two  gt  lt  span gt    lt span class  three  gt  lt  span gt    lt span class  four  gt  lt  span gt   lt  div gt    The tools I have available are JS and YUI2  I can do something like this   doc   document getElementById  test    notes   doc getElementsByClassName  four       or  doc   YAHOO util Dom get   test    notes   doc getElementsByClassName  four      These do not work in IE  I get an error that the object  doc  doesn t support this method or property  getElementsByClassName   I ve tried a few examples of cross browser implementations of getElementsByClassName but I could not get them to work and still got that error   I think what I need is a cross browser getElementsByClassName or I need to use doc getElementsByTagName  span   and loop through until I find class 4  I m not sure how to do that though

User · Answer

Use element querySelector    Lets assume   myElement  is the parent element you already have   sonClassName  is the class of the child you are looking for   let child   myElement querySelector   sonClassName      For more info  visit  https   developer mozilla org en-US docs Web API Element querySelector

User · Answer

Use doc childNodes to iterate through each span  and then filter the one whose className equals 4   var doc   document getElementById  test    var notes   null  for  var i   0  i  lt  doc childNodes length  i          if  doc childNodes i  className     4           notes   doc childNodes i         break

User · Answer

The way i will do this using jquery is something like this       var targetedchild       test   children   find  span four

User · Answer

To me it seems like you want the fourth span  If so  you can just do this   document getElementById  test   childNodes 3    or  document getElementById  test   getElementsByTagName  span   3    This last one ensures that there are not any hidden nodes that could mess it up

User · Answer

using querySelector  x000D   x000D  var doc document getElementById  test    console log doc querySelector   two   innerHTML  x000D   lt div id  test  gt    lt span class  one  gt  lt  span gt    lt span class  two  gt two lt  span gt    lt span class  three  gt  lt  span gt    lt span class  four  gt  lt  span gt   lt  div gt  x000D   x000D   x000D   Using querySelectorAll  x000D   x000D  var doc document getElementById  test    console log doc querySelectorAll      1  innerHTML  x000D   lt div id  test  gt    lt span class  one  gt  lt  span gt    lt span class  two  gt two lt  span gt    lt span class  three  gt  lt  span gt    lt span class  four  gt  lt  span gt   lt  div gt  x000D   x000D   x000D   using getElementsByTagNames  x000D   x000D  var doc document getElementById  test    console log doc getElementsByTagName  SPAN   1  innerHTML   x000D   lt div id  test  gt    lt span class  one  gt  lt  span gt    lt span class  two  gt two lt  span gt    lt span class  three  gt  lt  span gt    lt span class  four  gt  lt  span gt   lt  div gt   lt span gt ss lt  span gt  x000D   x000D   x000D   Using getElementsByClassName  x000D   x000D  var doc document getElementById  test    console log doc getElementsByClassName  two   0  innerHTML  x000D   lt div id  test  gt    lt span class  one  gt  lt  span gt    lt span class  two  gt two lt  span gt    lt span class  three  gt  lt  span gt    lt span class  four  gt  lt  span gt   lt  div gt  x000D   x000D   x000D

User · Answer

Use querySelector and querySelectorAll  var testContainer   document querySelector   test    var fourChildNode   testContainer querySelector   four      IE9 and upper

User · Answer

But be aware that old browsers doesn t support getElementsByClassName   Then  you can do  function getElementsByClassName c el       if typeof el   string   el document getElementById el        if  el  el document       if el getElementsByClassName  return el getElementsByClassName c        var arr             allEls el getElementsByTagName           for var i 0 i lt allEls length i             if allEls i  className split      indexOf c  gt -1  arr push allEls i              return arr    getElementsByClassName  4   test   0     It seems it works  but be aware that an HTML class   Must begin with a letter  A-Z or a-z Can be followed by letters  A-Za-z   digits  0-9   hyphens   -    and underscores

User · Answer

You can fetch the parent class by adding the line below  If you had an id  it would be easier with getElementById  Nonetheless    var parentNode   document getElementsByClassName  progress  container   0     Then you can use querySelectorAll on the parent  lt div gt  to fetch all matching divs with class  progress  marker  var progressNodes   progressContainer querySelectorAll   progress  marker      querySelectorAll will fetch every div with the class of progress  marker

User · Answer

I know this question is a few years old and there have been a few answers to this but I thought I would add my solution just in case it helps anyone  It s in the same vein as the answer given by user2795540 and involves an array iterator  If you re just wanting to get the first child that has the four class then you could use the find array iterator  Your browser will need to be able to support ES6 or you can use Babel to compile your JS into something all browsers will support  IE will not support this without a polyfill  Using the same details you provided in your question it could look something like this  const parentNode   document getElementById  test    const childNode   Array from parentNode childNodes  find    className      gt  className      four     The above solution will return the node you want to target and store it in the childNode variable  You can find out more about the find array iterator at https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array find

User · Answer

Here is a relatively simple recursive solution   I think a breadth-first search is appropriate here   This will return the first element matching the class that is found   function getDescendantWithClass element  clName        var children   element childNodes      for  var i   0  i  lt  children length  i              if  children i  className  amp  amp              children i  className split      indexOf clName   gt   0                return children i                          for  var i   0  i  lt  children length  i               var match   getDescendantWithClass children i   clName            if  match     null                 return match                         return null

User · Answer

The accepted answer only checks immediate children   Often times we re looking for any descendants with that class name     Also  sometimes we want any child that contains a className     For example   lt div class  img square  gt  lt  div gt  should match a search on className  img   even though it s exact className is not  img      Here s a solution for both of these issues   Find the first instance of a descendant element with the class className       function findFirstChildByClass element  className            var foundElement   null  found          function recurse element  className  found                for  var i   0  i  lt  element childNodes length  amp  amp   found  i                      var el   element childNodes i                   var classes   el className    undefined  el className split                            for  var j   0  jl   classes length  j  lt  jl  j                          if  classes j     className                            found   true                          foundElement   element childNodes i                           break                                                          if found                      break                  recurse element childNodes i   className  found                                   recurse element  className  false           return foundElement

User · Answer

Use the name of the id with the getElementById  no   sign before it  Then you can get the span child nodes using getElementsByTagName  and loop through them to find the one with the right class   var doc   document getElementById  test     var c   doc getElementsByTagName  span     var e   null  for  var i   0  i  lt  c length  i          if  c i  className     4             e   c i           break           if  e    null        alert e innerHTML       Demo  http   jsfiddle net Guffa xB62U

User · Answer

Use YAHOO util Dom getElementsByClassName   from here

User · Answer

Here is how I did it using the YUI selectors  Thanks to Hank Gay s suggestion   notes   YAHOO util Dom getElementsByClassName  four   span   test      where four   classname  span   the element type tag name  and test   the parent id

User · Answer

In my opinion  each time you can  you should use Array and its methods  They are much  much faster then looping over the whole DOM   wrapper  or pushing stuff into empty array  Majority of solutions presented here you can call Naive as described here  great article btw    https   medium com  chuckdries traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc  My solution   live preview on Codepen  https   codepen io Nikolaus91 pen wEGEYe   const wrapper   document getElementById  test      take a wrapper by ID - gt  fastest const itemsArray   Array from wrapper children     make Array from his children  const pickOne   itemsArray map item   gt       loop over his children using  map   -- gt  see MDN for more    if item classList contains  four       we place a test where we determine our choice      item classList add  the-chosen-one      your code here

User · Answer

You could try   notes   doc querySelectorAll   4      or  notes   doc getElementsByTagName       for  var i   0  i  lt  notes length  i           if  notes i  getAttribute  class       4

User · Answer

Modern solution const context   document getElementById  context    const selected   context querySelectorAll   scope  gt  div     documentation

User · Answer

YUI2 has a cross-browser implementation of getElementsByClassName

User · Answer

June 2018 update to ES6      const doc   document getElementById  test        let notes   null      for  const value of doc            if  value className      4                 notes   value              break

[javascript] How to get child element by class name?

Examples related to javascript

Examples related to yui