jsdom 技术文档

2024-12-20 07:37:00作者：乔或婵

1. 安装指南

环境要求

Node.js: jsdom 的最新版本需要 Node.js v18 或更高版本。如果你使用的是低于 v18 的 Node.js 版本，请安装 jsdom v23 或更早的版本。

安装步骤

打开终端或命令行工具。
使用 npm 或 yarn 安装 jsdom：
```
npm install jsdom
```
或者
```
yarn add jsdom
```

2. 项目的使用说明

基本用法

jsdom 是一个纯 JavaScript 实现的 Web 标准，主要用于 Node.js 环境中模拟浏览器 DOM 和 HTML 标准。你可以使用 JSDOM 构造函数来创建一个虚拟的 DOM 环境。

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

// 创建一个简单的 DOM 实例
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

自定义 jsdom

你可以通过传递第二个参数来自定义 jsdom 的行为。例如，设置 URL、引用来源、内容类型等。

const dom = new JSDOM(``, {
  url: "https://example.org/",
  referrer: "https://example.com/",
  contentType: "text/html",
  includeNodeLocations: true,
  storageQuota: 10000000
});

执行脚本

默认情况下，jsdom 不会执行嵌入在 HTML 中的脚本。你可以通过设置 runScripts: "dangerously" 选项来启用脚本执行。

const dom = new JSDOM(`<body>
  <div id="content"></div>
  <script>document.getElementById("content").append(document.createElement("hr"));</script>
</body>`, { runScripts: "dangerously" });

console.log(dom.window.document.getElementById("content").children.length); // 1

模拟可视化浏览器

通过设置 pretendToBeVisual: true，jsdom 可以模拟可视化浏览器的行为，例如启用 requestAnimationFrame 等 API。

const window = (new JSDOM(``, { pretendToBeVisual: true })).window;

window.requestAnimationFrame(timestamp => {
  console.log(timestamp > 0);
});

3. 项目API使用文档

`JSDOM` 对象 API

JSDOM 对象提供了许多有用的属性和方法，例如 window、document 等。你可以通过 JSDOM 对象来操作虚拟 DOM。

const { window } = new JSDOM(`...`);
// 或者
const { document } = (new JSDOM(`...`)).window;

加载子资源

默认情况下，jsdom 不会加载任何子资源（如脚本、样式表、图片等）。你可以通过设置 resources: "usable" 选项来加载这些资源。

const dom = new JSDOM(`<img src="image.png">`, { resources: "usable" });

4. 项目安装方式

使用 npm 安装

npm install jsdom

使用 yarn 安装

yarn add jsdom

通过以上步骤，你可以成功安装并使用 jsdom 来模拟浏览器环境，进行测试和网页抓取等操作。

jsdom

A JavaScript implementation of various web standards, for use with Node.js

项目地址：https://gitcode.com/gh_mirrors/js/jsdom

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解