Javascript get all direct children

javascript css-selectors children
Krupp picture Krupp · Jan 24, 2016 · Viewed 15.1k times · Source

I need to get all the direct children of an element. As it is here:

<div class='1'>
    <div class='2'>
        <div class='3'></div>
    </div>
    <div class='2'></div>
</div>

I need the two DIVs with class "2" using the one with class "1". Plain JavaScript - no libraries.

(They are the same class in this example just to be more clear. In my need they are with different, unknown classes.)

Answer

Josh Crozier picture Josh Crozier · Jan 24, 2016

One option is to use the direct child combinator, >, and the universal selector, *, in order to select direct children elements of any type:

document.querySelectorAll('.element > *');

Alternatively, there is also a .children property that will return all the direct children elements:

document.querySelector('.element').children;

Related questions

jQuery first child of "this"

I'm trying to pass "this" from a clicked span to a jQuery function that can then execute jQuery on that clicked element's first child. Can't seem to get it right... <p onclick="toggleSection($(this));"><span class="redClass"&…

Read More
How to select first parent DIV using jQuery?

var classes = $(this).attr('class').split(' '); // this gets the current element classes var classes = $(this).parent().attr('class').split(' '); // this gets the parent classes. The parent in the above situation is an ankor. If I wanted …

Read More
How to use querySelectorAll only for elements that have a specific attribute set?

I'm trying to use document.querySelectorAll for all checkboxes that have the value attribute set. There are other checkboxes on the page that do not have value set, and the value is different for each checkbox. The ids and names …

Read More