javascript - querySelectorAll() 排除属性及其子属性

Question

我有一个看起来像的元素树。

<div>
  <div required>
    <div content></div>
  </div>
  <div>
    <div content></div>
  </div>
</div>

如何在根 div 上执行 querySelector 来获取所有标记为“内容”的元素，而不获取任何位于具有“required”属性的父元素下方的元素？我在想类似的事情。

querySelectorAll('[内容]:not([必需]')

但是该查询将获取所有标记为内容且未标记为必需的元素，而不是获取标记为不低于必需元素的内容的所有元素。

Answer 1

不幸的是，:not 只接受一个简单的选择器，因此 :not([required] [content]) 来匹配 [content] 不是 [content] 的子项将不起作用。选择元素后，您必须以编程方式过滤它们:

const notRequiredContents = [...document.querySelectorAll('[content]')]
  .filter(elm => !elm.closest('[required]'));
console.log(notRequiredContents);

<div>
  <div required>
    <div content></div>
  </div>
  <div>
    <div content></div>
  </div>
</div>

理论上，通过将 :not([required]) 与后代选择器链接起来，仅使用查询字符串就可以做到这一点，但它看起来真的很难看并且重复且不应该这样做:

const notRequiredContents = document.querySelectorAll(`
  body > :not([required]) > [content],
  body > :not([required]) > :not([required]) > [content],
  body > :not([required]) > :not([required]) > :not([required]) > [content],
  body > :not([required]) > :not([required]) > :not([required]) > :not([required]) > [content]
`);
// continue above pattern for as much nesting as may exist
console.log(notRequiredContents[0], notRequiredContents.length);

<div>
  <div required>
    <div content>a</div>
  </div>
  <div>
    <div content>b</div>
  </div>
</div>