我有一棵看起來像的元素樹。<div> <div required> <div content></div> </div> <div> <div content></div> </div></div>如何在根 div 上執行 querySelector 來獲取標記為“內容”的所有元素，而不獲取任何位于具有“required”屬性的父元素下方的元素？我在想類似的事情。querySelectorAll('[content]:not([required]')但是該查詢將獲取標記為內容且未標記為必需的所有元素，而不是獲取標記為不低于必需元素的內容的所有元素。
2 回答
茅侃侃
TA貢獻1842條經驗 獲得超21個贊
不幸的是，: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>
aluckdog
TA貢獻1847條經驗 獲得超7個贊
JS
const query = document.querySelectorAll('div :not([required]) [content]')
query.forEach((element) => {
console.log(element.innerHTML)
})
超文本標記語言
<div>
<div required>
<div content>NO</div>
</div>
<div>
<div content>YES</div>
<div>
<div content>YES</div>
</div>
</div>
</div>
- 2 回答
- 0 關注
- 329 瀏覽
添加回答
舉報
0/150
提交
取消