如何生成指定DOM结构中所有叶子节点的CSS选择器数组？

你的需求是将给定DOM结构转换为包含所有叶子节点CSS选择器的扁平数组，但当前代码仅收集了所有节点的标签名，没有构建完整的选择器路径，也没有过滤出叶子节点。咱们来调整代码实现目标功能：

需求回顾 #

给定DOM结构：

<div> 
  <div> 
    <span> 
      <img/> 
      <i> 
        <span></span> 
        <meter></meter> 
      </i> 
      <a><span></span></a> 
    </span> 
  </div> 
  <nav> 
    <form> 
      <input/> 
      <button></button> 
    </form> 
  </nav> 
</div>

预期输出：

[ 
  'div > div > span > img', 
  'div > div > span > i > span', 
  'div > div > span > i > meter', 
  'div > div > span > a > span', 
  'div > nav > form > input', 
  'div > nav > form > button' 
]

修改后的代码实现 #

核心思路是跟踪当前节点的完整选择器路径，仅在遇到叶子节点（无子元素的节点）时，将完整路径加入结果数组：

function outputSelectors(result, node, currentPath = '') {
  // 将标签名转为小写，符合CSS选择器常规写法
  const tag = node.tagName.toLowerCase();
  // 拼接当前节点的完整选择器路径
  const newPath = currentPath ? `${currentPath} > ${tag}` : tag;
  
  // 判断是否为叶子节点：没有子元素时记录路径
  if (node.children.length === 0) {
    result.push(newPath);
    return;
  }
  
  // 递归遍历所有子节点，传递当前路径
  for (let i = 0, n = node.children.length; i < n; i++) {
    outputSelectors(result, node.children[i], newPath);
  }
}

// 调用示例（假设目标节点是document.body.children[0]）
const selectorResult = [];
outputSelectors(selectorResult, document.body.children[0]);
console.log(selectorResult);

代码说明 #

• currentPath参数：用于跟踪从根节点到当前节点的选择器路径，递归时会不断追加子节点的标签名
• 叶子节点判断：通过node.children.length === 0识别无后代的节点，仅这类节点的路径会被存入结果数组
• 标签名小写转换：CSS选择器不区分大小写，但统一小写更符合行业规范

运行这段代码后，就能得到你预期的扁平选择器数组。

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