如何从XMLHttpRequest返回的HTML中提取class为offer的div元素

API 探路者

2026-8-27

实现方案

你获取到的request.response是纯文本格式的HTML内容，无法直接调用DOM选择API，需要先将其解析为可操作的DOM结构，再提取目标元素即可，以下是两种可直接使用的实现方式：

原生DOMParser方案（推荐）
该方法为浏览器原生支持，无额外依赖，适配绝大多数现代浏览器，直接修改你的请求回调逻辑即可：

document.querySelector('#get_html').addEventListener('click', function () {
    var url = document.querySelector('#url_html');
    var request = new XMLHttpRequest();
    request.open("GET", url.value);
    request.send();

    request.onload = function() {
        // 把返回的HTML字符串解析为DOM文档对象
        const domParser = new DOMParser();
        const parsedDoc = domParser.parseFromString(request.response, 'text/html');
        // 提取class属性为offer的div元素
        const targetOfferDiv = parsedDoc.querySelector('div.offer');
        
        // 按需使用提取到的元素：
        // 获取元素完整HTML：targetOfferDiv.outerHTML
        // 获取元素内部内容：targetOfferDiv.innerHTML
        // 也可以直接把元素插入到当前页面的DOM中
        console.log(targetOfferDiv);
    };
})

临时容器解析方案（兼容老旧浏览器）
如果需要兼容不支持DOMParser的老旧浏览器，可以通过创建临时DOM容器的方式解析HTML：

request.onload = function() {
    // 创建一个脱离文档流的临时div作为容器
    const tempContainer = document.createElement('div');
    // 注入HTML字符串，浏览器会自动解析为DOM结构
    tempContainer.innerHTML = request.response;
    // 从临时容器中查找目标元素
    const targetOfferDiv = tempContainer.querySelector('div.offer');
    console.log(targetOfferDiv);
}