前言
前端开发离不开操作 DOM，而在 Node.js 端操作 DOM 则需要使用 JS 的 DOM API，针对这个问题，@forbeslindesay/jsdom 提供了一个优秀的解决方案。
@forbeslindesay/jsdom 是一个将 HTML 解析成 dom 并且实现了浏览器中 window 和 document 环境的 Node.js 模块。在 Node.js 环境中，我们可以使用 @forbeslindesay/jsdom 模块可以模拟浏览器环境，对 DOM 进行操作等。这对于实现基于 Node.js 的自动化测试框架，爬虫等非常有帮助。
下面，我们将对此模块进行详细的讲解。
安装
使用 npm 可以非常快捷的安装此模块：
npm install @forbeslindesay/jsdom
快速入门
下面是一个简单的使用例子：
const jsdom = require("@forbeslindesay/jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent);输出： Hello world
上面的代码演示了如何使用 @forbeslindesay/jsdom 将一个 HTML 字符串解析成 dom 并通过查询器获取到标签中的文本内容。
将网页解析成 dom 树
使用 @forbeslindesay/jsdom，我们可以将网页解析成 dom 树，然后对其进行操作。举个例子，假设我们有如下 HTML：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------------------- ------- ------ ------ ---------- --------- ------ ----------- ---- ------ ----------- ---- ------ ----------- ---- ------ ------- ------- ------- -------
我们可以使用如下代码将其解析成 dom 树：
-- -------------------- ---- ------- ----- ----- - --------------------------------- ----- - ----- - - ------ ----- ---- - - --------- ----- ------ ------ ------ ---------------- ----------------------- ------- ------ ------ ---------- --------- ------ ----------- ---- ------ ----------- ---- ------ ----------- ---- ------ ------- ------- ------- ------- -- ----- --- - --- ------------ -----------------------------------------------------------------
输出：
<div> <p>Hello world</p> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div>
上面的代码演示了如何将 HTML 解析成 dom 树，并从中获取 body 标签。
模拟浏览器环境
由于 Node.js 的全局环境和浏览器的全局环境不一样，如果需要操作 DOM，会出现一些问题。但是，在使用 @forbeslindesay/jsdom 之后，可在 Node.js 环境下模拟一个浏览器环境。
-- -------------------- ---- ------- ----- ----- - --------------------------------- ----- - ----- - - ------ ----- --- - --- ---------------- ------------- ----------- - ------------------ ----- ---------- --------- ----------- -------------- --- -------------------------------------------------------- -- -- - ------------------------------------------------ ---
输出：
<p>Hello world</p>
此代码演示了如何模拟一个浏览器环境，并使用 DOMContentLoaded 事件在页面加载完成后获取 body 内容。
操作 DOM
@forbeslindesay/jsdom 非常容易操作 DOM。下面是一些例子：
-- -------------------- ---- ------- -- ------ ----- ---- - ---------------------------- ----- ---- - ------------------------------ -------- ----------------------- ------------------------------------------------- -- ---- ----------------------------------------------------------------------- ----- -- ---- --------------------------------------- - ------ -------
总结
本文简单介绍了 @forbeslindesay/jsdom 的使用，同时，我们还通过示例代码演示了如何将网页解析成 dom 树，如何模拟浏览器环境以及如何操作 DOM。希望这篇文章可以帮助你更好的理解和使用 @forbeslindesay/jsdom。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc662b5cbfe1ea0612242