javascript - JavaScript 中的 DOM 解析

标签 javascript dom xmlhttprequest cross-domain innerhtml

一些背景:
我正在使用 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创建新文档,这样相对路径的外部资源不会在控制台抛出错误

最佳答案

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

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

关于javascript - JavaScript 中的 DOM 解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11966960/

相关文章:

JavaScript - innerHTML 改变更多然后第一次出现加上随机数组

javascript - 使用Javascript将表单数据发送到服务器并将其存储在服务器中

ajax - ASP.Net MVC RC 单元测试 Ajax 请求

multithreading - Delphi 中的 XmlHttpRequest 和线程

javascript - Jquery Waypoints 基本脚本不起作用

php - php或javascript或jquery中两个日期之间的差异

javascript - 异步代码运行 - 在react-native中使用Javascript OOP

javascript - 为什么 jQuery 不添加类 "drop1"?

javascript - 为什么简单的 createElement 命令不能与 JS 一起使用并在 HTML DOM 中创建元素

jQuery 在隐藏的父项中显示子项,错误地设置显示属性