使用DOMParser.parseFromString如何避免生成冗余html、head、body标签？

首先明确：使用DOMParser.parseFromString传入text/html类型时，按照W3C规范必须生成完整的HTML文档结构，默认自动补充、、标签，没有办法直接跳过这个机制，不过有几种更简洁的实现方案可以避免额外的querySelector操作，或者完全替换DOMParser写法。

方案1：简化现有DOMParser逻辑 #

不需要特意查询目标元素ID，直接从生成的document的body中提取子元素即可，适合返回单个目标元素的场景：

function insertFormAddAlunoHTML(){
  fetch('./myElementHTML.html')
    .then(res => res.text())
    .then(stringElement => {
      const html = new DOMParser().parseFromString(stringElement, 'text/html');
      // 直接提取body内的第一个元素，不需要查ID
      return html.body.firstElementChild;
    })
    .then(myElement => {
      // 直接拿到目标元素做后续操作
    })
    .catch(err => console.log(err));
}

这个方案改动最小，原有逻辑基本不需要调整，性能也没有额外损耗。

方案2：用临时元素+innerHTML实现（兼容性最好） #

完全不需要用到DOMParser，创建一个临时的空容器元素，直接把HTML字符串赋值给innerHTML，就能直接拿到目标元素，不会生成额外的html/head/body标签：

function insertFormAddAlunoHTML(){
  fetch('./myElementHTML.html')
    .then(res => res.text())
    .then(stringElement => {
      const tempContainer = document.createElement('div');
      tempContainer.innerHTML = stringElement;
      // 单个元素直接取firstElementChild，多个元素可以遍历children
      return tempContainer.firstElementChild;
    })
    .then(myElement => {
      // 后续操作
    })
    .catch(err => console.log(err));
}

这个方案兼容性覆盖所有主流浏览器，写法更简洁，是目前最常用的HTML片段解析方案。

方案3：用ContextualFragment实现（性能最优） #

现代浏览器支持createContextualFragment方法，专门用于解析HTML片段，生成的是无容器的DocumentFragment，插入页面时不会带额外节点，性能更高：

function insertFormAddAlunoHTML(){
  fetch('./myElementHTML.html')
    .then(res => res.text())
    .then(stringElement => {
      const fragment = document.createRange().createContextualFragment(stringElement);
      // 直接从片段中提取目标元素
      return fragment.querySelector('#myElement');
    })
    .then(myElement => {
      // 后续操作
    })
    .catch(err => console.log(err));
}

如果需要一次性插入多个解析后的DOM节点，这个方案的性能优势会更明显。

注意：以上所有方案解析HTML时都不会自动执行字符串内的