本文介绍通过 Fetch API 动态加载并解析外部 HTML 文件（如 A.html），在当前页面（B.html）中安全、可靠地统计其内部特定 CSS 类（如 .elem2）的元素数量，并将结果实时显示，避免因作用域限制导致的计数为 0 问题。
本文介绍通过 fetch api 动态加载并解析外部 html 文件（如 a.html），在当前页面（b.html）中安全、可靠地统计其内部特定 css 类（如 `.elem2`）的元素数量，并将结果实时显示，避免因作用域限制导致的计数为 0 问题。
在 Web 开发中，常需跨页面获取结构信息——例如在 B.html 中读取并分析 A.html 的 DOM 内容。但需明确：JavaScript 的 document.querySelectorAll() 只能操作当前文档对象模型（DOM），即运行该脚本的页面（B.html）自身结构。因此，原代码中 CntrElem2() 在 B.html 中执行时，自然只查找 B.html 中的 .elem2 元素（通常不存在），返回长度为 0。
要真正统计 A.html 中的 .elem2 元素，必须将 A.html 的 HTML 字符串加载进内存，并在其虚拟 DOM 上执行查询。现代浏览器提供了标准、安全的方案：使用 fetch() 获取 HTML 文本，再通过 document.createElement('div') 创建临时容器，注入解析后的结构，最后调用 querySelectorAll() 进行目标选择。
以下是优化后的 scripts.js 实现（兼容主流浏览器，含错误处理）：
async function CntrElem2() {
const targetElement = document.getElementById("myNum");
if (!targetElement) return;
try {
// 步骤1：异步获取 A.html 的原始 HTML 字符串
const response = await fetch('A.html');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: Failed to load A.html`);
}
const htmlText = await response.text();
// 步骤2：创建临时容器并解析 HTML（仅解析结构，不执行脚本/加载资源）
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlText;
// 步骤3：在解析后的虚拟 DOM 中精确查询 .elem2 元素
const elem2List = tempDiv.querySelectorAll('.elem2');
targetElement.textContent = elem2List.length;
} catch (err) {
console.error('Error counting .elem2 in A.html:', err);
targetElement.textContent = '—';
}
}⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 同源限制（CORS）：fetch('A.html') 要求 A.html 与 B.html 同协议、同域名、同端口。若部署在本地文件系统（file:// 协议），多数浏览器会阻止跨文件 fetch —— 请务必使用本地开发服务器（如 VS Code Live Server、python3 -m http.server）启动项目。
- ✅ HTML 解析安全性：tempDiv.innerHTML = htmlText 会解析 HTML 结构，但不会执行其中的 <script> 标签或加载 <img alt="如何在 B.html 中准确统计 A.html 中指定类名的元素数量" > 等外部资源</script>，因此适用于纯结构分析场景，无需担心 XSS 风险（前提是 A.html 内容可信）。
- ✅ 性能考量：对于大型 HTML 文件，此方法仍高效；若需高频调用，建议缓存解析结果或预计算后存入 localStorage。
- ❌ 不可用 document.write() 或 iframe.contentDocument：前者会覆盖当前页面，后者受同源策略严格限制且 iframe 加载时机难控制，均不推荐。
最后，在 B.html 中保持 onload="CntrElem2()" 即可确保页面加载完成后自动执行统计。该方案逻辑清晰、符合 Web 标准，是跨 HTML 文件 DOM 分析的推荐实践。
