JavaScript 中的 DOM 解析

DOM parsing in JavaScript

本文关键字：解析 DOM 中的 JavaScript      更新时间：2023-09-26

一些背景：
我正在使用JavaScript开发一个基于Web的移动应用程序。HTML 渲染是基于 Safari 的。跨域策略已禁用，因此我可以使用 XmlHttpRequest 调用其他域。这个想法是解析外部 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 创建新文档，以便具有相对路径的外部资源不会在控制台中抛出错误

似乎以下代码效果很好：

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

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

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

起源：https://developer.mozilla.org/en/DOMParser#DOMParser_HTML_extension_for_other_browsers

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

$(htmlBody).find('#theElementToFind').text();
相关文章：