Vanilla JS路由失效：<main>标签仅显示[object XMLDocument]问题排查

核心成因 #

你看到的[object XMLDocument]是浏览器尝试渲染完整XML/HTML文档对象时的字符串化结果，本质问题是没有正确处理加载后的HTML内容，直接把整个文档对象插入到了<main>标签中。

具体触发场景通常有两种：

• 通过fetch或XMLHttpRequest加载页面模板时，使用了返回完整文档对象的API（比如fetch的response.document()、XHR的responseXML），然后直接将这个文档对象赋值给innerHTML或用appendChild插入DOM。浏览器无法直接渲染文档对象，就会输出它的类型字符串。
• 加载的模板文件是包含<html>/<head>/<body>的完整HTML文档，但你没有从中提取出需要的页面内容，而是试图插入整个文档结构。

针对性解决方法 #

1. 正确解析并提取文档内容 #

如果你的模板是完整HTML文档，需要先提取出<body>内的核心内容再插入：

async function loadRouteContent(url) {
  const response = await fetch(url);
  // 先获取HTML字符串，再用临时元素解析
  const htmlStr = await response.text();
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlStr;
  
  // 提取body下的所有内容
  const targetContent = tempContainer.querySelector('body').children;
  
  // 清空main标签并插入内容
  const mainEl = document.querySelector('main');
  mainEl.innerHTML = '';
  Array.from(targetContent).forEach(node => mainEl.appendChild(node));
}

如果习惯用文档对象API，也可以这样处理：

async function loadRouteContent(url) {
  const response = await fetch(url);
  const doc = await response.document();
  // 克隆body节点（包含所有子内容）
  const content = doc.body.cloneNode(true);
  
  const mainEl = document.querySelector('main');
  mainEl.innerHTML = '';
  mainEl.appendChild(content);
}

2. 简化模板文件（推荐） #

如果路由页面不需要完整的HTML结构，可以把模板改成仅包含页面核心内容的片段（去掉<html>/<head>/<body>标签），这样直接赋值HTML字符串即可：

async function loadRouteContent(url) {
  const response = await fetch(url);
  const contentHtml = await response.text();
  document.querySelector('main').innerHTML = contentHtml;
}

这种方式代码更简洁，也避免了文档对象处理的麻烦。

3. 检查路由逻辑的渲染流程 #

如果是使用第三方路由库（或自己手写的路由逻辑），要确保渲染函数接收的是HTML字符串或DOM节点，而不是完整的文档对象。比如手写路由时，要在路由切换的回调里，把处理好的内容插入<main>，而不是直接传递fetch返回的文档对象。

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