NPM酷库：jsdom，纯JS实现的DOM

最新推荐文章于 2024-07-01 16:12:06 发布

weixin_34220834

最新推荐文章于 2024-07-01 16:12:06 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012813730

版权

NPM酷库，每天两分钟，了解一个流行NPM库。

昨天认识了一个在Node.js环境下操作HTML的库 cheerio，cheerio实现了jQuery接口，用起来十分方便。为什么不直接用jQuery呢？因为Node.js环境中没有实现DOM对象。

jsdom

今天，我们要学习的jsdom就是一个纯JS实现的DOM，jsdom可以在Node.js环境中“模拟出”DOM环境，像jQuery这样对DOM依赖的库就可以在Node.js中运行了。

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);

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

const $ = require('jquery')(dom.window);

$('p').text(); // "Hello world"

上述代码中，首先实例化一个JSDOM对象dom，实例化参数就是我们要操作的HTML字符串，然后就可以通过 dom.window.document 等DOM标准接口访问HTML内容了。

最后两行，我们引入了jQuery库，并将jQuery的window参数绑定到dom对象上，我们就可以用jQuery来访问HTML文本。

如果你的需求是简单地操作HTML文本，我建议你仍然使用更加轻量的cheerio库，但是如果cheerio满足不了你的需求，或者你为了像兼容jQuery一样兼容某些依赖DOM的npm库，你可以尝试jsdom来解决你的问题。

参考资料

jsdom: https://github.com/tmpvar/jsdom

cheerio: https://github.com/cheeriojs/...

DOM: https://dom.spec.whatwg.org

欢迎关注公众号：梁兴臣

梁兴臣

每天了解一个NPM库，一年后成为Node.js高手

weixin_34220834

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
NPM酷库：jsdom，纯JS实现的DOM

NPM酷库，每天两分钟，了解一个流行NPM库。昨天认识了一个在Node.js环境下操作HTML的库 cheerio，cheerio实现了jQuery接口，用起来十分方便。为什么不直接用jQuery呢？因为Node.js环境中没有实现DOM对象。jsdom今天，我们要学习的jsdom就是一个纯JS实现的DOM，jsdom可以在Node...
复制链接

扫一扫