如何从元素中查询（仅）子元素？

Question

想象这样的结构：

<div id="boxes">
  <div id="firstdiv">...</div>
  <div class="important">...</div>
  <div id="lastdiv">
    <div id="subdiv">...</div>
    <div class="important">...</div>
  </div>
</div>

现在，如果我写：

document.querySelectorAll('#boxes > div:not([class])')

我会得到#firstdiv和#lastdiv。大。

但是，如果我想对#boxes元素执行相同的操作怎么办？

const boxes = document.querySelector('#boxes')

// this is what I tried
boxes.querySelectorAll('> div:not([class])') // it doesn't work

// and if I type
boxes.querySelectorAll('div:not([class])')
// I get #firstdiv, #lastdiv BUT ALSO #subdiv which I don't want

我怎样才能做到这一点？

Answer 1

您可以:scope用来引用querySelectorAll被调用的元素：

const collection = boxes.querySelectorAll(':scope > div:not([class])');
console.log(collection.length, collection[0], collection[1]);

<div id="boxes">
  <div id="firstdiv">...</div>
  <div class="important">...</div>
  <div id="lastdiv">
    <div id="subdiv">...</div>
    <div class="important">...</div>
  </div>
</div>

（不幸的是，它没有强大的浏览器支持）