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

时间 2020-02-11

标签 npm jsdom 实现 dom 栏目 JavaScript 繁體版

原文原文链接

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

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

jsdom

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

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内容了。github

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

若是你的需求是简单地操做HTML文本，我建议你仍然使用更加轻量的cheerio库，可是若是cheerio知足不了你的需求，或者你为了像兼容jQuery同样兼容某些依赖DOM的npm库，你能够尝试jsdom来解决你的问题。segmentfault

参考资料

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

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

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

欢迎关注公众号：梁兴臣

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