Finding child element of parent pure javascript

Question

What would the most efficient method be to find a child element of  with class or ID  of a particular parent element using pure javascript only  No jQuery or other frameworks   In this case  I would need to find child1 or child2 of parent  assuming that the DOM tree could have multiple child1 or child2 class elements in the tree  I only want the elements of parent       lt div class  parent  gt           lt div class  child1  gt               lt div class  child2  gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

You have a parent element  you want to get all child of specific attribute  1  get the parent  2  get the parent nodename by using parent nodeName toLowerCase   convert the nodename to lower case e g DIV will be div  3  for further specific purpose  get an attribute of the parent e g parent getAttribute  id    this will give you id of the parent  4  Then use document QuerySelectorAll paret nodeName toLowerCase       parent getAttribute  id     input        if you want input children of the parent node    x000D   x000D  let parent   document querySelector  div classnameofthediv   x000D  let parent node   parent nodeName toLowerCase   x000D  let parent clas arr   parent getAttribute  class   split       x000D  let parent clas str       x000D    parent clas arr forEach e  gt   x000D       parent clas str   e      x000D       x000D  let parent class name   parent clas str substr 0  parent clas str length-1     remove the last dot x000D  let allchild   document querySelectorAll parent node     parent class name   input   x000D   x000D   x000D

User · Answer

If you already have var parent   document querySelector   parent    you can do this to scope the search to parent s children   parent querySelector   child

User · Answer

The children property returns an array of elements  like so   parent   document querySelector   parent    children   parent children       lt div class  child1  gt     There are alternatives to querySelector  like document getElementsByClassName  parent   0  if you so desire     Edit  Now that I think about it  you could just use querySelectorAll to get decendents of parent having a class name of child1   children   document querySelectorAll   parent  child1      The difference between qS and qSA is that the latter returns all elements matching the selector  while the former only returns the first such element

User · Answer

Just adding another idea you could use a child selector to get immediate children  document querySelectorAll   parent  gt   child1      should return all the immediate children with class  child1

[javascript] Finding child element of parent pure javascript

Examples related to javascript

Examples related to dom