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高手

NPM酷库：jsdom，纯JS实现的DOM的更多相关文章

  1. Highcharts纯js图表库，以后可以跟客户说，你跟阿里云ECS用的图表库是同款

    Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...

  2. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  3. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  4. 纯 js 让浏览器不缓存 ajax 请求

    开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...

  5. 基于Vue的npm组件库

    前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...

  6. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  7. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  8. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  9. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

随机推荐

  1. JavaSE基础（七）--Java流程控制语句之switch case 语句

    Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句语法格式如下: switch(exp ...

  2. HTTP请求方法：GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE 说明

    平时的Rest开发,用到的都是GET,POST,PUT,DELETE类型的请求. 但Rest支持的请求类型不止前面4种,还有其他几种. 下面部分转自: https://www.html.cn/arch ...

  3. ibox 的使用

    <div class="ibox float-e-margins"> <div class="ibox-title"> <h5&g ...

  4. mingw-w64 gcc std::thread 行为异常

    我用的 ming-w64 gcc 是通过 MSYS2 安装的,包名是 mingw-w64-x86_64-gcc,版本 9.2.0-2. 我发现 std::thread 行为异常. int main() ...

  5. 剑指offer49：把字符串转换成整数

    1 题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串转换整数的库函数. 数值为0或者字符串不 ...

  6. # 滚动Hash

    滚动Hash 假设字符串\(C=c_1*c_2*...c_m\),定义Hash函数\(H(C)=(C_1*b^{m-1}+C_2*b^{m-2}+...C_m*b^{0})mod\; h\) 从k开始 ...

  7. Photon Server 实现注册与登录(一) --- Hibernate整合到项目中

    本系列实现目的:基于Photon Server实现注册于登录 一.拷贝Nbibernate项目的文件到MyGamerServer项目中. 二.数据库新建表,结构如下 三.修改文件名和配置 (1).将拷 ...

  8. vue的基本语法

    在学习vue之前,我们应了解一下什么是vue.js? 什么是Vue.js? Vue.js是目前最后一个前端框架,React是最流行的一个前端框架(react除了开发网站,还可以开发手机App,Vue语 ...

  9. Python3 中，一行可以书写多个语句,一个语句可以分成多行书写

    Python3 中,一行可以书写多个语句 语句之间用分号隔开即可 print('I love you');print('very much!') Python3 中,一个语句可以分成多行书写 一行过长 ...

  10. mysqlbinlog实战

    关于mysqlbinlog命令,下列参数应用频率较高:--base64-output:选项有三个参数,never表示不处理ROW格式日志,只处理传统的基于STATEMENT格式日志.decode-ro ...