如何为动态DOM树生成唯一CSS选择器？附代码求优化建议

我正在开发一款多租户Web系统，商家入驻后可为自身网站创建营销活动。创建活动前需先生成并嵌入追踪脚本，设置活动时要指定转化统计对应的页面元素。为简化流程，我做了个可视化选择工具——用户输入网站URL后就能直观选择目标元素（比如“加入购物车”“提交”按钮）。但复杂网站的HTML结构难识别，需要在元素被点击时生成精准且唯一的CSS选择器。我写了generateQuerySelector函数，但不确定是否覆盖所有边缘场景，想了解相关实践经验或更优实现方案。这些网站可能基于WordPress、自定义HTML/CSS、Shopify等任意工具构建，无法提前知晓具体HTML结构。

现有代码：

function generateQuerySelector(el) {
  if (!el || el.tagName.toLowerCase() === 'html') return 'HTML';

  const path = [];
  while (el && el.nodeType === Node.ELEMENT_NODE) {
    let selector = el.tagName.toLowerCase();

    // Add ID if available
    if (el.id) {
      selector += '#' + el.id;
      path.unshift(selector);
      break; // IDs are unique, so we can stop here
    }

    // Add class names if available
    if (el.className && typeof el.className === 'string') {
      const classes = el.className.split(/\s+/).filter(Boolean);
      if (classes.length > 0) {
        selector += '.' + classes.join('.');
      }
    }

    const parent = el.parentNode;
    if (parent) {
      const siblings = Array.from(parent.children).filter(
        child => child.tagName.toLowerCase() === el.tagName.toLowerCase()
      );
      if (siblings.length > 1) {
        const index = siblings.indexOf(el) + 1;
        selector += `:nth-child(${index})`;
      }
    }
    path.unshift(selector);
    el = el.parentNode;
  }

  return path.join(' > ');
}

• 动态ID/类名失效：很多CMS会生成带随机后缀的ID或类名（比如btn-cart-abc123），这类选择器在页面更新后会直接失效，现有函数依赖ID的逻辑会导致追踪中断。
• 类名获取不可靠：部分元素的className可能不是字符串（如SVG或动态生成元素），直接读取className会出错，应该优先用classList。
• :nth-child位置计算错误：nth-child是基于父元素所有子元素的位置，若父元素中有其他标签的子元素，现有筛选同标签兄弟的逻辑会导致索引计算偏差（比如父元素有<div>, <p>, <div>，第二个<div>的nth-child应为3，但现有函数会算成2）。
• 无标识元素的脆弱选择器：纯文本元素（如无ID/类的<span>）会生成类似body > div:nth-child(2) > span:nth-child(3)的选择器，页面结构稍有变动就会失效。
• SVG元素兼容问题：SVG元素的标签名在部分环境下需要考虑命名空间，直接转小写可能导致选择器不生效。
• 冗余类名拖累性能：元素的类名过多时，全部加入选择器会导致选择器冗长且冗余，降低匹配效率。

以下是优化后的函数，解决上述问题：

function generateStableSelector(el) {
  if (!el || el.nodeType !== Node.ELEMENT_NODE) return '';
  if (el.tagName.toLowerCase() === 'html') return 'html';

  const path = [];
  let currentEl = el;

  while (currentEl && currentEl.nodeType === Node.ELEMENT_NODE && currentEl.tagName.toLowerCase() !== 'html') {
    let selectorPart = currentEl.tagName.toLowerCase();

    // 优先使用稳定的data属性（如data-action、data-testid）
    const dataAttrs = Array.from(currentEl.attributes).filter(attr => attr.name.startsWith('data-'));
    if (dataAttrs.length > 0) {
      const bestDataAttr = dataAttrs.find(attr => ['data-action', 'data-testid', 'data-target'].includes(attr.name)) || dataAttrs[0];
      selectorPart += `[${bestDataAttr.name}="${escapeCSSValue(bestDataAttr.value)}"]`;
      path.unshift(selectorPart);
      break;
    }

    // 仅使用静态ID（过滤带随机字符的ID）
    if (currentEl.id && !hasRandomChars(currentEl.id)) {
      selectorPart += `#${escapeCSSValue(currentEl.id)}`;
      path.unshift(selectorPart);
      break;
    }

    // 筛选静态类名，排除通用/随机类
    const staticClasses = Array.from(currentEl.classList).filter(className => 
      !className.match(/(wp-|shopify-|js-|css-|^btn$|^icon$)/i) && !hasRandomChars(className)
    );
    if (staticClasses.length > 0) {
      selectorPart += `.${staticClasses.slice(0, 2).map(c => escapeCSSValue(c)).join('.')}`;
    }

    // 用:nth-of-type替代:nth-child，避免其他标签干扰位置计算
    const parent = currentEl.parentNode;
    if (parent) {
      const sameTypeSiblings = Array.from(parent.children).filter(child => 
        child.tagName.toLowerCase() === currentEl.tagName.toLowerCase()
      );
      if (sameTypeSiblings.length > 1) {
        const index = sameTypeSiblings.indexOf(currentEl) + 1;
        selectorPart += `:nth-of-type(${index})`;
      }
    }

    path.unshift(selectorPart);
    currentEl = parent;
  }

  path.unshift('html');
  return path.join(' > ');
}

// 判断字符串是否含随机字符（如短哈希、随机数字）
function hasRandomChars(str) {
  return /[a-f0-9]{6,}/i.test(str) || str.split('-').some(part => /^[0-9a-zA-Z]{4,}$/.test(part));
}

// 转义CSS选择器中的特殊字符
function escapeCSSValue(value) {
  return value.replace(/[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g, '\\$&');
}

• 优先使用data属性：data-*属性多为开发者手动添加，稳定性远高于ID/类名，比如data-action="add-to-cart"这类标识几乎不会变动。
• 静态标识校验：过滤带随机后缀的ID和通用类名，避免选择器因页面更新失效。
• nth-of-type替代nth-child：仅统计同标签的兄弟元素，位置计算更准确。
• CSS值转义：处理含特殊字符的属性值，避免选择器语法错误。
• 选择器精简：类名最多取2个，避免生成过于冗长的选择器。

• 选择器即时验证：生成选择器后，立即用document.querySelector(selector)验证是否唯一匹配目标元素，失败则降级到更详细的路径。
• 开放手动编辑：允许商家手动修改生成的选择器，应对极端复杂的场景。
• 选择器有效性监控：定期检查追踪脚本中的选择器是否仍有效，失效则提示商家重新选择元素。
• 支持Shadow DOM：若商家网站使用Shadow DOM，需通过composedPath()获取完整元素路径。

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