Select only direct children of parent div, not all sub divs

November 14, 2022

So I’m trying to select 3 divs in my parent element. With my current code the result is I get 162 nodeLists back, instead of just the 3 main divs in that parent element.

The page code looks like this (simplified):

var parent = document.querySelector('.parent');

var wantedChildren = parent.querySelectorAll('div');

console.log(wantedChildren);

<div class="parent">
  <div class="wantedChild">
    <div class="unwantedChild">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="unwantedChild"></div>
  </div>
  <div class="wantedChild">
    <div class="unwantedChild"></div>
    <div class="unwantedChild"></div>
  </div>
  <div class="wantedChild">
    <div class="unwantedChild"></div>
    <div class="unwantedChild"></div>
  </div>
</div>

So the divs are just examples. The entire code on the page is way bigger.

I just want those 3 divs.

Does anybody know how to do this?