the quantity of elements which include levels

Question

How to count top-level divs, which include 2 levels? For example,

<div>
   <div>
   </div>
   <div>
   </div>
</div>
<div>
   <div>
   </div>
   <div>
   </div>
</div>
<div>
   <div>
   </div>
   <div>
   </div>
</div>

Answer must be 3. Thanks for answer!

Answer 1

So I got all the children from the top level (document.body) then filtered the ones that are div elements and have 2 or more children.

const divs = [...document.body.children].filter(elm => elm.tagName == 'DIV' && elm.children.length > 1).length;

console.log(divs);

<div>
   <div>
   </div>
   <div>
   </div>
</div>
<div>
   <div>
   </div>
   <div>
   </div>
</div>
<div>
   <div>
   </div>
   <div>
   </div>
</div>

Answer 2

You're going to have a set a className attribute for all the top level div. So you should have something looking like this:

HTML

<div class="parentDiv">
   <div>
   </div>
   <div>
   </div>
</div>
<div class="parentDiv">
   <div>
   </div>
   <div>
   </div>
</div>
<div class="parentDiv">
   <div>
   </div>
   <div>
   </div>
</div>

JS

let x = document.querySelectorAll('.parentDiv');
console.log(x.length + 1);

Answer 3

const allDivs = document.querySelectorAll('#range div');

// the "length" will give you the recurrent count for the query above.
console.log(allDivs.length)

<div id="range">
  <div>
    <div>
    </div>
    <div>
    </div>
  </div>
  <div>
    <div>
    </div>
    <div>
    </div>
  </div>
  <div>
    <div>
    </div>
    <div>
    </div>
  </div>
</div>

Answer 4

Unfortunately, a "parent" selector still does not exist in CSS today, see here, but the following might help:

// get "top" level divs:
const topDivs = document.querySelectorAll('body > div');
console.log([...topDivs].map(d=>d.childNodes[0].textContent.trim()));

// get "divs having at least one further div as a child":
const twoLvlDivs=new Set()
document.querySelectorAll('div>div').forEach(d=>twoLvlDivs.add(d.parentNode));
console.log([...twoLvlDivs].map(d=>d.childNodes[0].textContent.trim()));

div {padding-left: 20px}

<div>1
  <div>1.1</div>
  <div>1.2</div>
</div>
<div>2
  <div>2.1</div>
  <div>2.2
    <div>2.2.1</div>
    <div>2.2.2</div>
  </div>
  <div>2.3</div>
</div>
<div>3
  <div>3.1</div>
  <div>3.2</div>
</div>