如何使用JavaScript在template元素中选择根层级带有TAG属性的元素

刚好碰到过类似的场景！你可以用 :scope > [TAG] 这个选择器来精准匹配template根层级下带有TAG属性的节点，完全不需要额外过滤。

为什么之前的写法没生效？ #

• tem.content.querySelectorAll("[TAG]")：会遍历整个DocumentFragment下的所有节点，自然会把嵌套在内部的非目标div也选中；
• > [TAG]：语法无效，因为querySelectorAll的选择器默认没有上下文，不能直接以子选择器开头；
• :root：匹配的是整个HTML文档的根元素（即<html>标签），和template的DocumentFragment不是同一个上下文，所以无匹配；
• :host/:host([TAG])：属于Web Components的专用伪类，用来选择组件的宿主元素，和当前template场景不相关；
• 单独使用:scope：:scope在这里代表tem.content这个DocumentFragment本身，但单独使用只会匹配它自己，结合子选择器> [TAG]才能选中它的直接子节点。

修正后的测试代码 #

function print(test) {
  console.log(`Running: ${test}`);
  try {
    for (const result of test())
      console.log("Result: " + result.outerHTML);
  } catch(e) {
    console.log("Error: " + e.message);
  }
}
const tem = document.getElementById("tem")
print(() => tem.content.querySelectorAll("[TAG]")) // => [div, div]
print(() => tem.content.querySelectorAll("> [TAG]")) // => Error: DOMException: Failed to execute 'querySelectorAll' on 'DocumentFragment': '> [TAG]' is not a valid selector.
print(() => tem.content.querySelectorAll(":root")) // => []
print(() => tem.content.querySelectorAll(":host")) // => []
print(() => tem.content.querySelectorAll(":host([TAG])")) // => []
print(() => tem.content.querySelectorAll(":scope")) // => [DocumentFragment]
print(() => tem.content.querySelectorAll(":scope > [TAG]")) // => [div]（目标节点）
print(() => [...tem.content.querySelectorAll("[TAG]")].filter(e => e.parentNode instanceof DocumentFragment)) // => [div]

效果说明 #

使用:scope > [TAG]可以直接选中template根层级下带TAG属性的节点，不需要额外的过滤逻辑，代码更简洁高效。

内容的提问来源于stack exchange，提问作者user31277692