javascript - 如何从元素中查询选择器子项(仅)？

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>

(不幸的是，它不支持 great 浏览器)