Finding child element of parent with 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

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

http://stackoverflow.com/questions/7815374/get-element-inside-element-by-class-and-id-javascript — Dmitry Volokh, Apr 30 '13 at 14:14
ID would be the easiest way. They have to be unique, so you can just do `document.getElementById('element-id')`. — Felix Kling, Apr 30 '13 at 14:15
Use regular dom queries, then: read this [best way to get child nodes](http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes) — Elias Van Ootegem, Apr 30 '13 at 14:23

score 345 · Answer 1 · answered Sep 02 '16 at 14:33

345

If you already have var parent = document.querySelector('.parent'); you can do this to scope the search to parent's children:

parent.querySelector('.child')

answered Sep 02 '16 at 14:33

csch

4,496
2
19
23

6

You can also `parent.querySelectorAll('.child')` to return a NodeList – schmijos May 14 '19 at 08:55

score 234 · Accepted Answer · edited Oct 31 '18 at 18:19

234

The children property returns an array of elements, like so:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

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.

edited Oct 31 '18 at 18:19

jmargolisvt

5,722
4
29
46

answered Apr 30 '13 at 14:15

Rick Viscomi

8,180
4
35
50

I know this answer is 10+ years old, but because it might be still found on Google... Technically, `children` doesn't return an `array`, but an `HTMLCollection`. As in `Array.isArray(document.children) == false`. You need to use `Array.from(document.children)` to convert it to a proper array. – Jorjon Jun 15 '23 at 19:13

score 28 · Answer 3 · answered Jul 09 '18 at 14:46

28

Just adding another idea you could use a child selector to get immediate children

document.querySelectorAll(".parent > .child1");

should return all the immediate children with class .child1

answered Jul 09 '18 at 14:46

Waleed

349
3
6

I've been seeing everyone suggest querySelector than getElementBy**. Is it more efficient? – Andre Jul 22 '19 at 17:57
Maybe this will help. https://stackoverflow.com/questions/14377590/queryselector-and-queryselectorall-vs-getelementsbyclassname-and-getelementbyid – Waleed Jul 26 '19 at 02:44
This will not return `.child2`, and other children, as asked by @Blyde – Esger Jan 14 '21 at 08:23

score 18 · Answer 4 · edited Aug 01 '21 at 16:58

18

Element.querySelector() is the best way;

const parent = document.querySelector('.parent'); 
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">

edited Aug 01 '21 at 16:58

jacobkim

1,043
10
20

answered Aug 01 '21 at 01:46

FATCHOLA

393
2
4

When I use query selector against a parent that has three img elements that all have .img-fluid only the first img element is returned. How can I select all ? – b_dubb Oct 12 '22 at 20:16
2

@b_dubb you can use querySelectorAll instead to get all elements – Mhd Saleh Jan 12 '23 at 07:33

score 3 · Answer 5 · edited Jan 24 '20 at 00:16

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

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

Finding child element of parent with JavaScript

5 Answers5

Linked

Related