资讯专栏INFORMATION COLUMN

jsdom 中文文档(纯翻译)

SHERlocked93 / 1225人阅读

摘要:我们将用户可控制的控制台称为虚拟控制台,以便将其与和页面内部的区分开来。同样,目前在中是不能够处理相关信息的比如设置这样做会导致虚拟控制台发出,说明此功能未实现,并且没有任何变化也将不会有新的或对象,并且现有对象仍保持当前所有相同的属性值。

jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界的Web应用程序。

最新版本的 jsdom 运行环境需要 node.js v6或者更高的版本。(jsdom v10以下版本在 nodejs v4以下仍然可用,但是我们已经不支持维护了)

v10版本的 jsdom 拥有全新的 API(如下所述).旧的 API 现在仍然支持;详细的参照文档

基本用法
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

为了使用 jsdom,主要用到jsdom主模块的一个命名导出的 jsdom 构造函数。往构造器传递一个字符串,将会得到一个 jsdom 构造实例对象,这个对象有很多实用的属性,特别是 window 对象:

const dom = new JSDOM(`

Hello world

`); console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

(请注意,jsdom会像浏览器一样解析您传递的HTML,包括隐含的标记)

生成的对象是JSDOM类的一个实例,其中包括 window 对象在内的许多有用的属性和方法。一般来说,它可以用来从“外部”对jsdom进行操作,而这些操作对于普通DOM API来说是不可能的。对于不需要任何功能的简单场景,我们推荐使用类似的编码模式

const { window } = new JSDOM(`...`);
// or even
const { document } = (new JSDOM(`...`)).window;

下面是关于JSDOM类所能做的一切的完整文档,在“JSDOM对象API”部分。

定制 jsdom

JSDOM构造函数接受第二个参数,可以用以下方式定制您的jsdom。

简单选项
const dom = new JSDOM(``, {
  url: "https://example.org/",
  referrer: "https://example.com/",
  contentType: "text/html",
  userAgent: "Mellblomenator/9000",
  includeNodeLocations: true
});

url 设置的值可以通过window.locationdocument.URLdocument.documentURI来返回,并会影响文档中相关URL的解析以及获取子资源时使用的同源限制和referrer。默认值为"about:blank"

referrer 仅仅影响document.referrer的值。默认没有引用(即为空字符串)。

contentType 影响document.contentType的值,是按照HTML解析文档还是 XML来解析。它的值如果不是text/htmlXML mime type 值的话将会抛出异常。默认值为"text/html"

userAgent 影响navigator.userAgent的值以及请求子资源时发送的User-Agent头。默认值为Mozilla / 5.0($ {process.platform})AppleWebKit / 537.36(KHTML,如Gecko)jsdom / $ {jsdomVersion}

includeNodeLocations 保留由HTML解析器生成的位置信息,允许您使用nodeLocation()方法(如下所述)检索它。

它还能确保在 `); // 脚本默认将不能执行: dom.window.document.body.children.length === 1;

要在页面内启用脚本,可以使用runScripts:"dangerously"选项:

const dom = new JSDOM(`
  
`, { runScripts: "dangerously" });

// 脚本将执行并修改 DOM:
dom.window.document.body.children.length === 2;

我们再次强调只有在提供给jsdom的代码是你已知道是安全的代码时方可使用它。如果您运行了任意用户提供的或Internet上的不可信的Node.js代码,可能会危及您的计算机。

假如你想通过

如果您不能控制该页面,则可以尝试其他解决方法,例如轮询检查特定元素是否存在。有关更多详细信息,请查看#640中的讨论,尤其是@ matthewkastor的深刻见解。

共享的构造函数和原型

目前,对于大多数Web平台API,jsdom在多个看似独立的jsdoms之间共享相同的类定义。这将意味着,可能会出现以下情况

const dom1 = new JSDOM();
const dom2 = new JSDOM();

dom1.window.Element.prototype.expando = "blah";
console.log(dom2.window.document.createElement("frameset").expando); // logs "blah"

这主要是出于性能和内存的原因:如果在Web平台上每次创建jsdom时,创建所有类的多带带副本,开销将会相当昂贵。

尽管如此,我们仍然有兴趣在有一天提供一个选项配置来创建一个“独立”的jsdom,但要牺牲一些性能。

新API中缺失的功能

与v9.x之前的旧版jsdom API相比,新API显然缺少对资源加载的精细控制。先前版本的jsdom允许您设置request时使用的选项(既可以用于初始请求,也可以用于旧版本的JSDOM.fromURL()和子资源请求)。他们还允许您控制请求哪些子资源并将其应用于主文档,以便您可以下载样式表,但不下载脚本文件。最后,他们提供了一个可定制的资源加载器,可以拦截任何传出的请求并用完全合成的response 响应来结束。

以上这些功能尚未在新的jsdom API中实现,尽管我们也希望尽快将它们添加回来,但不幸的是,这需要相当大的幕后工作去实施。

同时,请随时使用旧的jsdom API来访问此功能。它一直处于支持和维护中,但它不会获得新功能。旧的文档位于lib/old-api.md中。

未实现的Web平台部分

目前jsdom中有很多缺失的API,尽管我们也想要在jsdom中添加新的功能并保持最新的Web规范。请随时为缺失的任何内容提交issue,但我们是一个很小并且忙碌的团队,因此大家一起来提交 pull request可能会更好。

除了我们尚未拥有的功能之外,还有两个主要功能目前超出了jsdom的范围。这些是:

Navigation:在点击链接或赋值location.href或类似操作时可以更改全局对象和所有其他的对象。

Layout:计算CSS元素的视觉布局的能力,这会影响诸如getBoundingClientRects()或者诸如offsetTop之类的属性

目前,jsdom对某些功能的某些方面具有虚拟行为,例如操作navigation 时向虚拟控制台发送“未实现的”"jsdomError",或者为许多与布局相关的属性返回0。您通常可以在代码中解决这些限制,例如通过在爬网过程中为每个页面创建新的JSDOM实例,或使用Object.defineProperty更改各种与布局相关的getter和方法的返回值

请注意,相同领域中的其他工具(如PhantomJS)确实支持这些功能。在wiki上,我们有关于jsdom vs. PhantomJS的更完整的比较介绍。

获取帮助

如果您需要jsdom的帮助,请随时使用以下任何方式:

邮件组(问题最好以"how do i"的形式)

报iusse(最好用BUG 报告)

IRC频道:#jsdom on freenode

特别声明

以上文档翻译自开源项目 jsdom,如有翻译错误,欢迎指正。

jsdom 原文链接

jsdom 项目链接

jsdom 中文翻译wiki链接

原文博客地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94976.html

相关文章

  • NPM酷库:jsdomJS实现的DOM

    摘要:酷库,每天两分钟,了解一个流行库。昨天认识了一个在环境下操作的库,实现了接口,用起来十分方便。今天,我们要学习的就是一个纯实现的,可以在环境中模拟出环境,像这样对依赖的库就可以在中运行了。 NPM酷库,每天两分钟,了解一个流行NPM库。 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便。为什么不直接用jQuery...

    13651657101 评论0 收藏0
  • NPM酷库:jsdomJS实现的DOM

    摘要:酷库,每天两分钟,了解一个流行库。昨天认识了一个在环境下操作的库,实现了接口,用起来十分方便。今天,我们要学习的就是一个纯实现的,可以在环境中模拟出环境,像这样对依赖的库就可以在中运行了。 NPM酷库,每天两分钟,了解一个流行NPM库。 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便。为什么不直接用jQuery...

    tylin 评论0 收藏0
  • 记一次翻译站经历

    摘要:做这个记录之前,刚完成使用作为公司前端项目的持续交付工具的实践,打算写的教程前先把官方文档扒下来做个翻译站。在实践一番后,卡在不能频密调取翻译这块上,项目无法进行下去。 做这个记录之前,刚完成使用drone作为公司前端项目的持续交付工具的实践,打算写的教程前先把官方文档扒下来做个翻译站。在实践一番后,卡在不能频密调取google翻译这块上,项目无法进行下去。最后觉得经历的过程涉及的内容...

    seasonley 评论0 收藏0
  • 合理的使用函数式编程

    摘要:但是,如果我们使用过多的函数式编程的抽象概念,我们的函数式编程也会非常难以理解。相比于不太合理的纯函数式编程,我们的代码更加可读理解和修改,这也是我们重构代码的目的。 本文是篇译文,原文链接An Introduction to Reasonably Pure Functional Programming,不当之处还请指正。 一个好的程序员应该有能力掌控你写的代码,能够以最简单的方法使你...

    张率功 评论0 收藏0
  • 使用 ava 和 jsdom 做前端测试

    摘要:前同事留下的测试,是基于浏览器的,主要还是功能测试。这里不详细说怎么在浏览器端使用测试了。而且作者也是建议和支持这样做的,简单明了的测试脚本,重要性有时候可能和测试本身一样重要。经测试,在浏览器也有这种问题。 2016-09-03 更新 随着在工作学习中更多地接触、使用测试工具,发现自己在本文中的一些记录是不准确、不正确的。 今天(九月三日)在家看了 NingJs 的直播,其中有一个分...

    GHOST_349178 评论0 收藏0

发表评论

0条评论

SHERlocked93

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<