JSFiddle - React, Tailwind, and code Playground

HTML

<div id='test-div'>
        <div class='random-class-1'>
           <div class='useless-element-1'>
            </div>
            <div class='useless-element-2'>
            </div>
           <p>Just a paragraph, and useless</p>
        </div>
        <div class='random-class-2'>
            <div class='useless-element-3'>
            </div>
            <div class='useless-element-4'>
            </div>
            <div class='useless-element-5'>
            </div>
        </div>
    </div>

JavaScript

var el = document.getElementById("test-div")
// OR var el = document.querySelectorAll("#test-div");

var rootel = el.querySelectorAll(":scope > div");

alert( rootel.length )