jsdom 技术文档

2024-12-15 15:54:11作者：乔或婵

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

项目优选

收起

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

Cangjie

196

openHiTLS

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

HarmonyOS-Examples

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

Cangjie

268

qwerty-learner

为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers

TSX

333

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

Markdown

896

advanced-java

Advanced-Java是一个Java进阶教程，适合用于学习Java高级特性和编程技巧。特点：内容深入、实例丰富、适合进阶学习。

前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。官网地址：https://matechat.gitcode.com

144

HarmonyOS-Cangjie-Cases

参考 HarmonyOS-Cases/Cases，提供仓颉开发鸿蒙 NEXT 应用的案例集

Cangjie

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

`JSDOM` 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

热门内容推荐

最新内容推荐

项目优选

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

JSDOM 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

相关内容推荐

热门内容推荐

最新内容推荐

项目优选

`JSDOM` 对象 API