JavaScript 中的 DOM 解析

Posted 2023-05-07

【中文标题】JavaScript 中的 DOM 解析

【英文标题】：DOM parsing in JavaScript

【发布时间】：2012-08-11 14:38:24

【问题描述】：

一些背景： 我正在使用 javascript 开发基于 Web 的移动应用程序。 html 渲染是基于 Safari 的。跨域策略已禁用，因此我可以使用 XmlHttpRequests 调用其他域。这个想法是解析外部 HTML 并获取特定元素的文本内容。 过去我逐行解析文本，找到我需要的行。然后获取标签的内容，它是该行的子字符串。这很麻烦，每次目标html更改时都需要大量维护。 所以现在我想将 html 文本解析为 DOM 并在其上运行 css 或 xpath 查询。 效果很好：

$('<div></div>').append(htmlBody).find('#theElementToFind').text()

唯一的问题是，当我使用浏览器将 html 文本加载到 DOM 元素中时，它会尝试加载所有外部资源（图像、js 文件等）。虽然它不会造成任何严重的问题，但我想避免这种情况。

现在的问题是：如何在浏览器不加载外部资源或运行 js 脚本的情况下将 html 文本解析为 DOM？ 我一直在思考的一些想法：

使用 createDocument 调用 (document.implementation.createDocument()) 创建新的文档对象，但我不确定它是否会跳过外部资源的加载。 在 JS 中使用第三方 DOM 解析器 - 我尝试过的唯一一个在处理错误方面非常糟糕 使用 iframe 新建文档，使具有相对路径的外部资源不会在控制台报错

【参考方案1】：

看来下面这段代码效果很好：

var doc = document.implementation.createHTMLDocument("");
doc.documentElement.innerHTML = htmlBody;
var text = $(doc).find('#theElementToFind').text();

未加载外部资源，未评估脚本。

在这里找到它： https://***.com/a/9251106/95624

产地： https://developer.mozilla.org/en/DOMParser#DOMParser_HTML_extension_for_other_browsers

【讨论】：

太棒了，+1 和收藏。是否保证没有外部加载/脚本评估，或者目前“它只是工作”？如果这可以在未来的任何时候改变，它可能不是一个非常强大的解决方案。

这很好，但有一个问题，它不会复制 HTML 节点上的属性，但这是次要的，因为它实现了上面列出的主要问题。

【参考方案2】：

您可以构造任何 html 字符串的 jQuery 对象，而无需将其附加到 DOM：

$(htmlBody).find('#theElementToFind').text();

【讨论】：

这仍将运行 JavaScript。

这确实会运行js并加载外部资源（图片、css等）