我有一个看起来像的元素树。
<div>
<div required>
<div content></div>
</div>
<div>
<div content></div>
</div>
</div>
如何在根 div 上执行 querySelector 来获取所有标记为“内容”的元素,而不获取任何位于具有“required”属性的父元素下方的元素?我在想类似的事情。
querySelectorAll('[内容]:not([必需]')
但是该查询将获取所有标记为内容且未标记为必需的元素,而不是获取标记为不低于必需元素的内容的所有元素。
最佳答案
不幸的是,: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>
关于javascript - querySelectorAll() 排除属性及其子属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60537626/