仅能访问Node类型时，如何实现类似Element.querySelector的功能？

假设无法访问Element类型（此限制源于我在Angular中使用inject(ElementRef)，其他场景也可能出现该情况）。Node实例没有querySelector方法，但拥有childNodes列表属性，且每个子节点也有自己的childNodes，以此类推。通过这些可以实现搜索算法，在Node树中查找目标节点，替代querySelector的功能。我的疑问是，这种实现思路看似十分基础，理应存在原生方案。是否已有原生实现？或者能否将Node转换为Element以使用原生querySelector方法？

核心解决方案 #

• 优先尝试类型转换：如果你的Node实例本质上是Element（比如Angular ElementRef的nativeElement），可以直接通过类型断言转换为Element类型（TypeScript中用const element = node as Element），之后就能直接调用element.querySelector()等原生方法。但如果Node是文本节点、注释这类非元素节点，转换无效。
• 无通用原生Node版querySelector：DOM原生API里没有给所有Node类型提供的querySelector类方法，因为这类选择器查询是Element接口的专属能力，仅元素节点支持。
• 自定义遍历实现：如果必须基于Node的childNodes遍历，可自行编写递归或迭代的搜索函数，示例如下：

function queryNode(node, selector) {
  // 检查当前节点是否为元素节点且匹配选择器
  if (node.nodeType === Node.ELEMENT_NODE) {
    if (node.matches(selector)) return node;
    // 递归遍历子节点
    for (const child of node.childNodes) {
      const result = queryNode(child, selector);
      if (result) return result;
    }
  } else {
    // 非元素节点直接遍历其子节点
    for (const child of node.childNodes) {
      const result = queryNode(child, selector);
      if (result) return result;
    }
  }
  return null;
}

补充说明 #

如果需要批量查询，也可以基于上述逻辑扩展为queryNodeAll，收集所有匹配的节点即可。临时挂载到DocumentFragment的方式本质还是依赖Element的能力，和直接转换类型的思路类似，没有额外优势。

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