如何通过querySelectorAll获取指定DOM节点的一级子元素

针对嵌套无序列表的DOM查询，页面已存在的DOM结构如下时：

<ul>
    <li>Item
        <ul>
            <li>Subitem</li>
        </ul>
    </li>
</ul>

在document节点上调用querySelectorAll()，使用ul > li选择器即可正常获取所有第一层级的LI元素：

let firstLevelChildren = document.querySelectorAll('ul > li');

但如果是通过document.createElement('ul')动态创建的UL节点（未插入页面DOM树），要在该节点上调用querySelectorAll()获取它的一级子元素，直接传入> li作为选择器会抛出语法错误：

' > li' is not a valid selector.
虽然通过node.children属性可以实现一级子元素获取，但需要基于querySelectorAll()实现，同时还要支持类似> li > ul这类更复杂的直接子元素组合查询场景。

CSS选择器语法不允许以关系运算符（比如直接子元素标识符>）开头，要在指定节点上查询其直接子元素，使用:scope伪类指代当前调用querySelectorAll()的节点本身即可，正确写法如下：

let ul = document.createElement('ul');
ul.innerHTML = '<li>Item<ul><li>Subitem</li></ul></li>';
// :scope 代表当前调用查询方法的ul节点，后续拼接层级选择器即可
let items = ul.querySelectorAll(':scope > li');
console.log(items); // 可正常获取到UL下的第一层级LI元素

针对更复杂的直接子层级查询场景，直接在:scope后拼接选择器规则即可，比如查询一级LI下的直接子UL：

let subUlList = ul.querySelectorAll(':scope > li > ul');

兼容性说明：:scope伪类在所有现代浏览器中均已完整支持，动态创建的未插入文档流的节点使用该方法查询，不需要提前挂载到页面DOM树即可正常返回结果。

内容的提问来源于stack exchange，提问作者stckvrw