高效获取含data-prefix-*属性元素集合的最优方案

以下是几种无需添加冗余data-prefix属性、且性能可控的解决方案：

方案1：用XPath精准匹配属性名前缀 #

XPath支持通过starts-with()函数直接定位属性名以data-prefix-开头的元素，无需遍历无关节点，性能表现优秀：

const xpathResult = document.evaluate(
  '//*[starts-with(name(@*), "data-prefix-")]',
  container,
  null,
  XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
  null
);

for (let i = 0; i < xpathResult.snapshotLength; i++) {
  const el = xpathResult.snapshotItem(i);
  // 处理目标元素，比如读取其dataset
  console.log(el.dataset);
}

说明：name(@*)会取元素的所有属性名，starts-with()判断属性名是否以data-prefix-开头，只要元素拥有这类属性就会被选中。

方案2：先筛选带data属性的元素再过滤前缀 #

先用CSS选择器[data-]缩小范围，只获取带有任意data属性的元素，再通过dataset的key判断是否符合前缀要求，比遍历所有DOM元素高效得多：

container.querySelectorAll('[data-]').forEach(el => {
  // dataset的key是驼峰化后的结果，比如`data-prefix-f1`对应`prefixF1`，所以判断是否以"prefix"开头
  const hasTargetPrefix = Object.keys(el.dataset).some(key => key.startsWith('prefix'));
  if (hasTargetPrefix) {
    // 处理目标元素
    console.log(el);
  }
});

这个方案写法简洁，[data-]选择器能快速排除大量无data属性的元素，适合静态DOM场景。

方案3：用MutationObserver监控动态元素 #

如果页面会动态添加目标元素，用MutationObserver监控DOM变化，实时捕获新增的符合条件的元素，避免重复全量扫描：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      
      // 检查当前节点是否符合要求
      if (Object.keys(node.dataset).some(key => key.startsWith('prefix'))) {
        console.log('新增目标元素:', node);
      }
      
      // 递归检查子节点（如果新增的是容器元素）
      node.querySelectorAll('[data-]').forEach(child => {
        if (Object.keys(child.dataset).some(key => key.startsWith('prefix'))) {
          console.log('新增子目标元素:', child);
        }
      });
    });
  });
});

// 启动监控，指定目标容器和监控配置
observer.observe(container, { childList: true, subtree: true });

该方案适合动态加载内容的页面，只处理DOM变化的部分，性能开销极低。

内容的提问来源于stack exchange，提问作者Jan Turoň