Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get all descendant Elements for parent container?

Tags:

javascript

dom

How can I get all descendant Elements for parent container? I want to get them in 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'm think about recursion as one of options. At the first point I know parent Element.

like image 928
Alex Avatar asked Oct 12 '14 12:10

Alex


People also ask

How do I get all Div children?

If You want to get list only children elements with id or class, avoiding elements without id/class, You can use document. getElementById('container'). querySelectorAll('[id],[class]'); ... querySelectorAll('[id],[class]') will "grab" only elements with id and/or class.

How do I get javascript descendants?

If you mean descendants, you can use querySelectorAll : var descendants = theElement. querySelectorAll("*");

Which Javascript function is used to select the child tag from the parent element?

getElementById('element-id') .


1 Answers

If you mean children, element instances have childNodes (which includes non-element children like text nodes) and (on most engines) children (which just has child elements). (You clarified you mean descendants.)

If you mean descendants, you can use querySelectorAll:

var descendants = theElement.querySelectorAll("*");

All modern browsers, and IE8, have querySelectorAll.

It gives you a NodeList, which is array-like. If you want a true JavaScript array, you can use Array.prototype.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 polyfilled):

var descendants = Array.from(theElement.querySelectorAll("*"));

Now that most environments made NodeList iterable (and you can polyfill it trivially if they don't), you can also use spread notation in an ES2015+ environment:

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>
like image 187
T.J. Crowder Avatar answered Oct 02 '22 05:10

T.J. Crowder