尝试解析 AJAX 响应时出现“getElementById 不是函数”?

IT技术 javascript xmlhttprequest greasemonkey getelementbyid gm-xmlhttprequest
2021-03-07 13:10:45

我正在运行GM_xmlhttpRequest(在 Greasemonkey 脚本中)并将其存储responseText到新创建的 HTML 元素中:

var responseHTML = document.createElement('HTML');
...
onload: function() { responseHTML.innerHTML = response.responseText; }


然后我试图在 中找到一个元素responseHTML

console.log(responseHTML.getElementsByTagName('div'));
console.log(responseHTML.getElementById('result_0'));


第一个工作正常,但不是第二个。有任何想法吗?

3个回答

使用DOMParser()转换responseText成可搜索的DOM树。
此外,您尝试搜索/使用从responseText,派生的任何内容必须发生在onload函数内部

使用这样的代码:

GM_xmlhttpRequest ( {
    ...
    onload:     parseAJAX_ResponseHTML,
    ...
} );

function parseAJAX_ResponseHTML (respObject) {
    var parser      = new DOMParser ();
    var responseDoc = parser.parseFromString (respObject.responseText, "text/html");

    console.log (responseDoc.getElementsByTagName('div'));
    console.log (responseDoc.getElementById('result_0'));
}


当然,还要验证result_0返回的 HTML 中是否确实存在带有 id 的节点(使用 Firebug、Wireshark 等)

啊,错过了greasemonkey 标签。对不起。
2021-04-22 13:10:45
他的代码和你的一样:这意味着你的代码不能因为同样的原因工作 - getElementById 不是 HTML 元素的方法,它是文档的方法。
2021-04-24 13:10:45
多谢你们。我倾向于避开 DOMParser,因为我过去在让它工作时遇到了麻烦^_^ 但无论如何,我明白为什么它现在不起作用了。
2021-05-17 13:10:45
@slebetman:不,我的代码确实有效,而 responseDoc一个文档。...你可以看到它在fiddle.jshell.net/UEuKZ/show 工作(代码仅适用于 Firefox,因为这是一个Greasemonkey问题,所以没关系)。
2021-05-20 13:10:45

getElementById不是 HTML 元素的方法。它是文档节点的一种方法。因此,你不能这样做:

div.getElementById('foo'); // invalid code

您可以实现自己的函数来通过递归遍历 DOM 来搜索 DOM children在较新的浏览器上,您甚至可以使用该querySelector方法。对于最小的开发,您可以使用像 jQuery 或 sizzle.js(jQuery 背后的查询引擎)这样的库。

不需要将响应存储在元素中,也不需要使用 DOMParser()

只需将 responseType 设置为 'document' ,响应将被自动解析并存储在 responseXML 中

例子:

var ajax = new XMLHttpRequest();
ajax.open('get','http://www.taringa.net');
ajax.responseType = 'document';
ajax.onload = function(){
    console.log(ajax.responseXML); //And this is a document which may execute getElementById
};
ajax.send();