CODEWITHSUNDEEP
javascriptdom
Blyde
Blyde

Reputation: 3153

Finding child element of parent with JavaScript

What would be the most efficient method to find a child element (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>

Upvotes: 274

Views: 614904

Answers (6)

Mawiz Khan
Mawiz Khan

Reputation: 91

You can use to get parent

let parent = document.querySelector('.parent');

use parent to get a specific child

let child1 = parent.querySelectorAll('.child');

All children can be fetched using

let  childrens = parent.children;

we can get single child by index as well

let secondChild = parent.children[1]

Upvotes: 8

FATCHOLA
FATCHOLA

Reputation: 441

Element.querySelector() is the best way;

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

Upvotes: 22

Adio Azeez
Adio Azeez

Reputation: 31

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")

Upvotes: 3

Rick Viscomi
Rick Viscomi

Reputation: 8852

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.

Upvotes: 248

Waleed
Waleed

Reputation: 379

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

Upvotes: 31

csch
csch

Reputation: 4826

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

parent.querySelector('.child')

Upvotes: 375

Related Questions