JavaScript如何基于已获取的#outer引用查询所有符合条件的b元素？

你之前拿不到全量匹配元素的核心问题有两个：

• 调用了错误的DOM查询方法：querySelector天生只会返回匹配选择器的第一个元素，哪怕选择器能匹配到多个节点，它也只会返回DOM遍历顺序下遇到的第一个匹配项，根本不会返回全量结果。
• 你之前测试的选择器b.dest没有叠加你需要的「父元素首个子元素」的限制条件，只要是#outer子树里带dest类的b标签都会被匹配，只是因为querySelector的返回逻辑，才只拿到了第一个元素。

在你已经拿到#outer元素引用的前提下，直接在这个元素实例上调用querySelectorAll方法，传入匹配条件的选择器即可拿到全部符合要求的元素：

// 你已经提前获取到的outer元素引用
const outerEl = document.querySelector("#outer");
// 查询所有符合条件的元素，返回包含两个目标b标签的NodeList
const matchedElements = outerEl.querySelectorAll("b.dest:first-child");

你提供的HTML结构里，两个b.dest标签刚好都符合「自身是所在父元素的首个元素子节点」的规则：

• 外层b标签是#outer的第一个元素子节点
• 内层b标签是#test的第一个元素子节点

这个写法不需要给选择器额外加#outer的前缀，因为元素实例上的querySelectorAll本身就会在当前元素的所有子节点范围内做深度遍历，查询范围和你在document上调用时的逻辑一致，只是检索起点换成了你已经拿到的outer元素。

小提醒：:first-child是CSS内置的元素选择伪类，判断时会自动忽略文本、注释等非元素节点，不会因为源码里的换行、缩进空白导致匹配失效，可以放心使用。

内容的提问来源于stack exchange，提问作者Just a learner