NPM酷库:jsdom,纯JS实现的DOM
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的更多相关文章
- Highcharts纯js图表库,以后可以跟客户说,你跟阿里云ECS用的图表库是同款
Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 纯 js 让浏览器不缓存 ajax 请求
开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...
- 基于Vue的npm组件库
前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...
- 纯JS实现俄罗斯方块,打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
随机推荐
- lua语法介绍(二)
一.语法简要 在学习任何语法之前,我们都需要知道该门语言是怎样定义的,是怎样运行的,话说白了,就是到了人家的山头得唱人家山头的歌.下面介绍lua的语法 1.变量的定义 特点: 1.变量在使用前必须声明 ...
- storm常见问题
一.storm ui 不显示 supervisor 信息 在zk节点上删掉storm信息,重新启动storm集群即可
- 【AtCoder】M-SOLUTIONS Programming Contest
M-SOLUTIONS Programming Contest A - Sum of Interior Angles #include <bits/stdc++.h> #define fi ...
- python — 生成器、推导式、递归
目录 1 生成器(函数的变异) 2 推导式 3 递归 1 生成器(函数的变异) 判断一个函数是否是生成器函数:只需看函数内部是否有yield # 生成器函数(内部是否包含yield) def func ...
- nasm 使用总结
1,编译 nasm -f bin myfile.asm -o myfile 生成目标文件 nasm -f bin myfile.asm -l myfile 生成清单文件 2,快速开始 nasm是 ...
- Python 正则表达模块详解
Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...
- 并不对劲的CSP-S2019
day1 对题的第一印象: t1:颇有"小凯的疑惑"之风(赛后发现确实如此,因为最好写的正解也可以直接输出) t2:log方会被卡吧?好像倍增一个log?(赛后发现有很好写的线性做 ...
- OkHttp3 + retrofit2 封装
0.下载文件 1.gradle 添加 compile 'com.squareup.retrofit2:retrofit:2.1.0'compile 'com.squareup.retrofit2:co ...
- c#本地文件配置xml
/// <summary> /// 处理xml文件 /// </summary> public class HandelXmlFile { private string _co ...
- STM32-移植FATFS的NANDFLASH驱动
一,建立工程FATFS源码 1,在http://elm-chan.org/fsw/ff/00index_e.html上下载ff007c.zip,并把ff007c.zip里面的 src文件夹复制到D:\ ...