如何指定querySelectorAll统计目标HTML文件中特定DIV的数量？

document.querySelectorAll只能操作当前页面的DOM，要统计A.html里的元素，必须先把A.html的内容加载到B.html的运行环境中，再针对加载后的DOM进行查询。以下是两种可行方案：

方案1：用Fetch API加载并解析A.html #

通过Fetch获取A.html的文本内容，再用DOMParser解析成独立的DOM对象，之后就能在这个DOM里查询目标元素了。

示例代码：

async function CntrElem2() {
  try {
    // 获取A.html的内容
    const response = await fetch('A.html');
    const htmlContent = await response.text();
    
    // 把文本解析为DOM结构
    const parser = new DOMParser();
    const aPageDOM = parser.parseFromString(htmlContent, 'text/html');
    
    // 在A.html的DOM中统计class为elem2的DIV数量
    const count = aPageDOM.querySelectorAll('div.elem2').length;
    
    // 将结果显示在B.html的页面上（假设页面有id为result的元素）
    document.getElementById('result').textContent = `A.html中elem2类DIV的数量：${count}`;
  } catch (err) {
    console.error('加载A.html出错：', err);
  }
}

// 页面加载完成后执行统计
window.addEventListener('load', CntrElem2);

方案2：用iframe嵌入A.html（适合需要展示A内容的场景） #

如果需要在B.html里同时展示A.html的内容，可以用iframe加载A.html，待iframe加载完成后，访问其内部的DOM进行统计。

示例代码：

<!-- 在B.html中添加隐藏的iframe（如需展示可去掉display:none） -->
<iframe id="aIframe" src="A.html" style="display:none;"></iframe>
<!-- 用于显示结果的元素 -->
<div id="result"></div>

<script>
function CntrElem2() {
  const iframe = document.getElementById('aIframe');
  // 等待iframe加载完成
  iframe.onload = function() {
    // 获取iframe内部的DOM对象
    const aPageDOM = iframe.contentDocument || iframe.contentWindow.document;
    const count = aPageDOM.querySelectorAll('div.elem2').length;
    document.getElementById('result').textContent = `A.html中elem2类DIV的数量：${count}`;
  };
}

window.addEventListener('load', CntrElem2);
</script>

关键注意事项 #

两种方案都受浏览器同源策略限制：A.html和B.html必须在同一个域名、端口、协议下（比如都在本地服务器的http://localhost:8080下）。如果直接用file://协议打开本地文件，部分浏览器会阻止跨文件请求，建议用本地服务器（比如Node.js的http-server、Python的SimpleHTTPServer）运行页面。

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