我有一棵看起來像的元素樹。<div> <div required> <div content></div> </div> <div> <div content></div> </div></div>如何在根 div 上執(zhí)行 querySelector 來獲取標(biāo)記為“內(nèi)容”的所有元素，而不獲取任何位于具有“required”屬性的父元素下方的元素？我在想類似的事情。querySelectorAll('[content]:not([required]')但是該查詢將獲取標(biāo)記為內(nèi)容且未標(biāo)記為必需的所有元素，而不是獲取標(biāo)記為不低于必需元素的內(nèi)容的所有元素。
2 回答
茅侃侃
TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個(gè)贊
不幸的是，:not只接受一個(gè)簡單的選擇器，因此: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])與后代選擇器鏈接來僅使用查詢字符串來完成此操作，但它看起來非常丑陋且重復(fù)，不應(yīng)該這樣做：
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>
aluckdog
TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊
JS
const query = document.querySelectorAll('div :not([required]) [content]')
query.forEach((element) => {
console.log(element.innerHTML)
})
超文本標(biāo)記語言
<div>
<div required>
<div content>NO</div>
</div>
<div>
<div content>YES</div>
<div>
<div content>YES</div>
</div>
</div>
</div>
- 2 回答
- 0 關(guān)注
- 325 瀏覽
添加回答
舉報(bào)
0/150
提交
取消