Finding child element of parent with JavaScript
JavascriptDomJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
If you already have var parent = document.querySelector('.parent');
you can do this to scope the search to parent
's children:
parent.querySelector('.child')
Solution 2 - Javascript
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.
Solution 3 - Javascript
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
Solution 4 - Javascript
Element.querySelector() is the best way;
const parent = document.querySelector('.parent');
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">
Solution 5 - Javascript
You have a parent element, you want to get all child of specific attribute
- get the parent
- get the parent nodename by using
parent.nodeName.toLowerCase()
convert the nodename to lower case e.g DIV will be div - for further specific purpose, get an attribute of the parent e.g
parent.getAttribute("id")
. this will give youid
of the parent - 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")