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