如何在 Firefox 中从 JavaScript 解析 HTML？答案

【问题标题】：How to parse HTML from JavaScript in Firefox?如何在 Firefox 中从 JavaScript 解析 HTML？
【发布时间】：2010-10-27 16:41:10
【问题描述】：

在 Firefox 中解析（获取 DOM 树）XmlHttpRequest 的 HTML 结果的最佳方法是什么？

编辑：

我确实没有有 DOM 树，我想获得它。

XmlHttpRequest 的“responseXML”仅在结果是实际 XML 时才有效，所以我只有 responseText 可以使用。

~~innerHTML hack 似乎不适用于完整的 HTML 文档（在中）。~~ - 结果证明它工作正常。

【问题讨论】：

浏览器解析纯 html 代码，因为它们存在。但很遗憾，没有简单、标准的方法可以调用浏览器的解析器从 html 字符串生成 HTMLDocument 对象...

标签： javascript ajax firefox dom

【解决方案1】：

循环 XMLHttpRequest 对象的 responseXML 属性。此外，如果您使用 innerHTML 附加 HTML 格式响应的 responseText，浏览器将解析文本并将其组装到 DOM 中，甚至在将其附加到文档流之前。

【讨论】：

【解决方案2】：

如果您的数据是 XHTML，因此它是有效的 XML，那么 DOMParser (Mozilla) 或 loadXML (IE) 可能会有所帮助。如果没有，我想不出比剥离 and 然后将其传递给 a 的 innerHtml 更好的方法了。

请参阅 Flanagan 的 Javascript 指南（第 5 版）中的 21.1.3。

科林

【讨论】：

【解决方案3】：

innerHTML 应该可以正常工作，例如

// This would be after the Ajax request:
var myHTML = XHR.responseText;
var tempDiv = document.createElement('div');
tempDiv.innerHTML = myHTML.replace(/<script(.|\s)*?\/script>/g, '');

// tempDiv now has a DOM structure:
tempDiv.childNodes;
tempDiv.getElementsByTagName('a'); // etc. etc.

【讨论】：

看起来这是我能做的最好的了。感谢您提供有关的提示
如果您担心
根据此页面：bytes.com/topic/javascript/answers/513633-innerhtml-script-tag - 当通过 innerHTML 添加时，您无需担心脚本块被执行：“通过 innerHTML 插入的脚本块不会在任何浏览器中执行，除了NS6" - 虽然那是 2006 年写的。
如果要解析的文档 myHTML 是一个以 ... 开头的完整 HTML 文档怎么办？将它作为 div 的 innerHTML 没有多大意义，不是吗？即使当前的浏览器能够忽略一些标记以找到合适的替代 div 的 innerHTML，但对我来说这听起来不是一个干净的解决方案。
这对 "test" 失败，它只对 Div 正确

【解决方案4】：

至少对于较新的 Firefox 版本，一种更简单的方法已经或即将推出。

https://developer.mozilla.org/en/HTML_in_XMLHttpRequest 表示从 FF11 开始，可以通过将 responseType 属性设置为 "document" 直接从 XHR 请求 DOM。此时，HTML 将被解析，并且 DOM 会像 XML 文档一样插入responseXML。

【讨论】：

【解决方案5】：

你可以使用 DOMParser 来解析 HTML——甚至是标签汤：

var parser = new DOMParser()
parser.parseFromString('<!DOCTYPE html><html><head><title>hi</title></head><body><p>hello<b>world</b></p>', 'text/html')

我不知道它是否能很好地处理部分表格标记，但它应该创建与浏览器本身对几乎所有标记相同的 DOM。

【讨论】：