如何用原生JavaScript通过AJAX加载指定URL的特定HTML元素

嘿，你已经搞定了AJAX请求的核心部分，现在只需要从返回的完整HTML里精准提取出<main>元素就行啦！下面直接给你修改好的代码，完美适配你现有的myLoad函数：

myLoad( 'GET', 'secondPage.html', '', r => {
  // 用DOMParser把返回的HTML字符串转换成可操作的DOM文档
  const parser = new DOMParser();
  const targetDoc = parser.parseFromString(r, 'text/html');
  
  // 从目标文档中抓取<main>元素
  const newMainContent = targetDoc.querySelector('main');
  
  // 替换当前页面的<main>元素
  const currentMain = document.querySelector('main');
  if (newMainContent) {
    // 直接替换整个元素，完全保留目标<main>的结构和属性
    currentMain.replaceWith(newMainContent);
    // 如果你想保留原页面<main>的自身属性（比如class、id），可以换成下面这行：
    // currentMain.innerHTML = newMainContent.innerHTML;
  } else {
    console.error('secondPage.html里没找到<main>元素哦');
  }
});

原理说明 #

DOMParser是浏览器原生提供的API，它能把HTML字符串转换成完整的DOM树，就像浏览器加载一个真实页面一样。这样你就可以用熟悉的querySelector方法，从这个虚拟的DOM树里精准定位到你要的<main>元素，再替换到当前页面的DOM中。

额外提示 #

• 加个存在性判断很重要：如果secondPage.html里没有<main>元素，代码会友好地抛出错误提示，避免页面出现异常。
• 这个方法只会提取<main>的内容，不会加载目标页面的CSS、JS等外部资源，完全符合你的需求。如果之后需要同步加载这些资源，再单独处理就行。

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