javascript - 如何强制在解析html文件时不发送其他请求？

Question

我正在编写一个 Chrome 扩展程序，它将 GET 请求发送到网站，并开始抓取作为响应返回的 .html 文件。在查看 chrome DevTool 中的网络部分时，我发现 html 发送了很多无用的(对我来说)请求，因为它们是网页逻辑的一部分。有没有一种方法可以按原样读取和解析 html 文件，而无需创建所有这些间接请求？另一个请求的发起者是这一行(正如 chrome 建议的那样):

htmlObject.innerHTML = xhr.responseText;

这是我正在运行的与此问题相关的代码部分:

function makeCall(word) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = processResponse(xhr);
    xhr.open("GET", 'https://school.morfix.co.il/' + word, true);
    xhr.send(null);
}
function processResponse(xhr) {
    return function(){
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var htmlObject = document.createElement('div');
            htmlObject.innerHTML = xhr.responseText;
            var translations = htmlObject.getElementsByClassName("normal_translation_div");
            for (var i=0; i< translations.length; i++){
                var trans = translations[i].innerHTML;
                console.log(trans.replace(/<span class=\"clearOutputLanguageMeaningsString\">; <\/span>/g, ";"));
            }
        }
    }
}

Answer 1

尝试访问xhr.responseXML而不是 responseText。它应该为您提供一个可以执行查询的文档。

如果这不起作用，您可以使用 DOM Parser 而不是创建 DOM 节点。解析响应，如下所示:

const parser = new DOMParser()
const parsedDoc = parser.parseFromString(xhr.responseText, 'text/html')

// now you can use the parsedDoc like a regular document
var translations = parsedDoc.getElementsByClassName("...")