Imagine having an HTML structure similar to the one below:
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
When trying to select the children of "a" using querySelectorAll, you could attempt:
//Selecting "b", excluding "c"
document.querySelectorAll('#a > div')
The question at hand: Can this be achieved without specifying the ID and directly referencing the node? I initially tried:
var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here
However, an error occurred indicating that the selector used was invalid.
In a more complex scenario like selecting '> .foo .bar .baz', manual DOM traversal is something I want to avoid. I have resorted to temporarily assigning an ID to the root div, although it feels like a makeshift solution...