Finding child element of parent pure 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')
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.
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