本文介绍如何高效解析 XML 文档，提取所有 元素，并基于其 number 属性值筛选出质数编号的 badge 节点，最终返回结构化数据对象数组，适用于大规模数据（如 30,000+ 条）处理场景。
本文介绍如何高效解析 xml 文档，提取所有 `
在实际系统（如门禁日志、权限管理平台）中，常需基于 XML 数据按业务规则动态过滤 DOM 元素。本例目标明确：从
✅ 正确实现思路：分离关注点 + 函数式链式处理
核心策略是三步走：
-
精准定位：使用 querySelectorAll 定位
元素； - 结构化映射：用 map() 提取关键属性（number 转为数字、passcode、issued）；
- 质数过滤：用 filter() 结合高效质数判定函数筛选。
以下是优化后的完整实现：
// ✅ 高效质数判定（支持大数，时间复杂度 O(√n)）
function isPrime(num) {
if (num root');
// 安全获取 badges 子节点（避免索引越界）
const badgesNode = accessControl[0].querySelector('badges');
if (!badgesNode) throw new Error('XML missing <badges> section');
const badgeElements = [...badgesNode.querySelectorAll('badge')];
return badgeElements
.map(el => ({
id: Number(el.getAttribute('number')),
passcode: el.getAttribute('passcode'),
issued: el.getAttribute('issued')
}))
.filter(badge => isPrime(badge.id));
}
// ✅ 在 getData 中调用示例
const getData = async () => {
try {
const response = await fetch('task.xml');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const xmlString = await response.text();
const xmlDoc = new DOMParser().parseFromString(xmlString, 'text/xml');
const primeBadges = getPrimeBadges(xmlDoc);
console.log('✅ Prime-numbered badges:', primeBadges);
// 可选：渲染到表格（示例）
const table = document.getElementById('html-data-table');
primeBadges.forEach(badge => {
const row = table.insertRow();
row.insertCell().textContent = badge.id;
row.insertCell().textContent = badge.passcode || '—';
});
} catch (err) {
console.error('❌ Failed to load or parse XML:', err);
}
};
document.getElementById('action').addEventListener('click', getData);</badges>
⚠️ 关键注意事项
- 性能敏感场景必须优化质数判断：原始 testPrime 对每个数都遍历到 n-1，30,000 个 badge 最坏需约 4.5 亿次运算；优化后仅需遍历至 √n，30,000 个 badge 的总计算量降至约 300 万次，提升超 150 倍。
- XML 解析容错性：务必检查 querySelector 返回值是否为 null，避免 Cannot read property 'querySelectorAll' of null 错误。
- 属性安全访问：使用 getAttribute('number') 替代 attributes[0].value，避免因 XML 属性顺序变化导致的 bug。
- 内存与可维护性：返回纯对象数组（而非原始 DOM 元素），便于后续 JSON 序列化、导出 CSV 或状态管理，同时解耦数据与视图。
? 总结
本方案以专业前端工程实践为标准，兼顾正确性、性能、健壮性与可读性：
? 使用 map + filter 实现声明式数据流，逻辑清晰；
? 质数检测采用数学最优解，支持万级数据毫秒级响应；
? 全程防御性编程，覆盖常见 XML 解析异常；
? 输出标准化对象结构，无缝对接前端渲染或后端 API。
? 扩展建议：若需进一步提升大数据量下的响应速度，可考虑 Web Worker 分离 XML 解析任务，或对质数结果做缓存（如 Map
），避免重复计算。
