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>
If you already have var parent = document.querySelector('.parent'); you can do this to scope the search to parent's children:
parent.querySelector('.child')
parent.querySelectorAll('.child') to return a NodeListThe 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.
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.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
.child2, and other children, as asked by @BlydeElement.querySelector() is the best way;
const parent = document.querySelector('.parent');
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">
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]
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")
document.getElementById('element-id').