TypeScript中如何通过querySelector按innerText获取匹配的div元素

需求规则 #

• 匹配目标：所有内部存在innerText值为*（兼容前后空格）的span子元素的div节点
• 去重要求：同一个div下存在多个星号span时，仅存入结果数组一次
• 排除规则：div下不存在符合要求的span时，不纳入结果
• 给定示例HTML中，前2个div符合要求，第3个div无星号span，不纳入结果

实现代码 #

function getDivsWithAsteriskSpan(): HTMLDivElement[] {
  const divSet = new Set<HTMLDivElement>();
  // 遍历页面所有span元素
  document.querySelectorAll('span').forEach(span => {
    // 去除文本前后空格，判断是否为星号
    if (span.textContent?.trim() === '*') {
      // 向上查找最近的祖先div
      const closestDiv = span.closest('div');
      if (closestDiv) {
        divSet.add(closestDiv as HTMLDivElement);
      }
    }
  });
  return Array.from(divSet);
}

// 调用使用
const resultDivs = getDivsWithAsteriskSpan();

逻辑说明 #

• 使用Set结构存储匹配到的div，自动处理重复存入的问题
• 用textContent.trim()做文本匹配，兼容星号前后带空格的写法（比如示例中*的格式）
• 调用原生DOM方法closest('div')向上查找最近的父级div，支持span嵌套在label等任意深度子节点的场景，无需手动逐层遍历节点
• 补充了TypeScript类型断言和可选链判断，符合TS类型校验规范，避免空值报错

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