fetch获取文本响应后无法使用querySelector选择元素的问题

你写的fetch版本代码不生效，核心原因是res.text()返回的data是纯HTML字符串，不是可操作的DOM节点对象，字符串本身不存在querySelector方法，自然无法调用。
而jQuery的$(response)做了隐式处理：只要传入的参数是符合格式的HTML字符串，jQuery会自动把字符串解析为临时DOM节点集合，后续调用find()就是在这个临时集合里做元素查询。

你需要手动把返回的HTML字符串解析为DOM结构，再执行选择器查询，常用的有两种实现方式：

方案1：使用DOMParser解析 #

DOMParser是浏览器原生提供的解析接口，可以直接把HTML字符串解析为完整的Document对象，后续选择器查询和普通页面DOM操作完全一致：

fetch('/some-endpoint', {
  method: 'POST',
  body: new FormData(e.currentTarget)
})
.then(res => res.text())
.then(data => {
  // 将HTML字符串解析为独立DOM文档
  const htmlDoc = new DOMParser().parseFromString(data, 'text/html');
  // 直接查询目标元素即可
  const targetElement = htmlDoc.querySelector('.some-selector');
  // 后续自定义逻辑
})

方案2：创建临时DOM容器 #

如果不想用DOMParser，也可以创建一个脱离当前页面文档流的临时div容器，把返回的HTML注入进去后再查询：

fetch('/some-endpoint', {
  method: 'POST',
  body: new FormData(e.currentTarget)
})
.then(res => res.text())
.then(data => {
  // 创建临时容器
  const tempBox = document.createElement('div');
  // 注入返回的HTML内容
  tempBox.innerHTML = data;
  // 查询目标元素
  const targetElement = tempBox.querySelector('.some-selector');
  // 后续自定义逻辑
})

• 用临时容器方案时，如果你的目标元素.some-selector是返回HTML片段的最外层根节点，querySelector是查不到的——因为querySelector只会查找容器的后代元素，这种场景要么从tempBox.children里遍历匹配目标，要么直接用DOMParser方案，没有这个层级限制。
• 上述两种方案生成的DOM节点都不会自动插入到当前页面，如果你需要把获取到的元素渲染到页面上，手动调用appendChild、insertBefore等DOM插入方法即可。

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