从fetch请求到DOM：如何将响应转换为可遍历的DOM结构？

标准实现方案 #

你目前写的方案存在隐性问题：手动创建<html>元素后通过innerHTML赋值解析时，字符串里的<html>、<head>、<body>标签会被浏览器自动过滤，最终得到的DOM结构是不完整的。

这类需求不需要复杂实现，浏览器原生提供了专门的DOMParser API做HTML字符串解析，属于官方标准能力：

// 拉取目标页面HTML文本
const htmlText = await (await fetch('https://目标地址')).text();
// 解析为完整的DOM文档对象
const htmlDoc = new DOMParser().parseFromString(htmlText, 'text/html');
// 直接调用querySelector等DOM API检索元素即可，和操作当前页DOM没有区别
const targetElement = htmlDoc.querySelector('目标元素选择器');

你提到的类似.domNodes()的链式便捷调用，目前原生Fetch API还没有内置对应方法，自己封装只需要3行代码，全局注册一次就能全局复用：

// 全局封装一次即可
Response.prototype.getDom = async function () {
  const text = await this.text();
  return new DOMParser().parseFromString(text, 'text/html');
};

// 后续调用形式和你预期的写法基本一致
const htmlDoc = await (await fetch('https://目标地址')).getDom();

注意：如果请求的是跨域地址，需要目标服务返回合法的CORS响应头，否则浏览器会拦截响应内容，这是同源策略的默认限制，和DOM解析方案无关。

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