如何通过querySelectorAll(selector)获取一级子级

Question

如果我们有一个包含嵌套 UL 列表的 UL 列表，例如

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

我们只需要获取第一层的所有LI元素，我们可以使用

querySelectorAll()

，如下所示：

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

但是如果我通过

document.createElement('ul')

创建 UL 列表并需要通过

querySelectorAll(selector)

获取此类特定节点的第一级子节点怎么办？

有选择器吗？

我知道

node.children

，但我需要一种通过

querySelectorAll()

的方法。

第一级儿童的数量可能未知。也可能有不同的情况，比如

'> li > ul'

等等。

方式如下：

let ul = document.createElement('ul');
ul.innerHTML = '<li>Item<ul><li>Subitem</li></ul></li>';
let items = ul.querySelectorAll('> li');
console.log(items);

抛出错误

' > li' 不是有效的选择器。

Answer 1

使用

:scope

let ul = document.createElement('ul');
ul.innerHTML = `
  <li>
    Item
    <ul>
      <li>Subitem</li>
    </ul>
  </li>`;
let items = ul.querySelectorAll(':scope > li');
document.body.appendChild(ul)
console.log(items.length + ' first level item(s)');