How can I get all the children for the parent container?
How can I get all the children for the parent container? I want to get them in an array.
<div class="parent">
<div class="child1">
<span class="child2">
<div class="child3">
<div class="child4">
<span class="child5"></span>
</div>
<div class="child6">
<div class="class7"></div>
</div>
</div>
</span>
<div class="child8"></div>
<span class="child9">
<div class="child10"></div>
</span>
</div>
</div>
I think of recursion as one option. In the first point, I know the element parent
.
source to share
If you have in mind children who have copies of the elements in childNodes
(which includesitself is not a child-element , as text nodes) and (in most engines) (You clarified that you mean descendants.)children
(who only have children).
If you mean descendants, you can use querySelectorAll
:
var descendants = theElement.querySelectorAll("*");
All modern browsers and IE8 have querySelectorAll
.
This gives you NodeList
one that looks like an array. If you want a real JavaScript array, you can use Array#slice
to get it like this:
var descendants = Array.prototype.slice.call(theElement.querySelectorAll("*"));
Or you can use Array.from
(added in ES2015 but easily populated):
var descendants = Array.from(theElement.querySelectorAll("*"));
Now that most frameworks have made it NodeList
iterative (and you can trivially fill it if they don't ), you can also use spread notation in ES2015 +:
var descendants = [...theElement.querySelectorAll("*")];
Example:
var descendants = Array.prototype.slice.call(
document.querySelector(".parent").querySelectorAll("*")
);
descendants.forEach(function(descendant) {
display(descendant.className);
});
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
<div class="parent">
<div class="child1">
<span class="child2">
<div class="child3">
<div class="child4">
<span class="child5"></span>
</div>
<div class="child6">
<div class="class7"></div>
</div>
</div>
</span>
<div class="child8"></div>
<span class="child9">
<div class="child10"></div>
</span>
</div>
</div>
source to share
Use theElement.getElementsByTagName("*")
, not theElement.querySelectorAll("*")
- because it's faster. getElementsByTagName is also better supported in older browsers.
This returns an HTMLCollection, which is similar to Array. You indicated that you want it as an array. To convert it to a real array, follow these steps:
Array.prototype.slice.call(theElement.getElementsByTagName("*"))
If you need even better browser support, you can use jQuery 1.12.4 or picoQuery , which is a reimplementation of jQuery where you can choose which methods you want in the online builder. In this case, you don't need the methods as the allocation is part of the core and the build is only 1kb gzipped. picoQuery is written for modern browsers, but falls back to jQuery 1.12.4 for older browsers.
source to share