jsdom 技术文档

2024-12-20 22:17:45作者：乔或婵

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

登录后查看全文

项目优选

收起

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

Python

ops-math

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

C++

519

RuoYi-Vue3

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

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

993

396

community

本项目是CANN开源社区的核心管理仓库，包含社区的治理章程、治理组织、通用操作指引及流程规范等基础信息

359

openGauss-server

openGauss kernel ~ openGauss is an open source relational database management system

为非计算机科班出身 (例如财经类高校金融学院) 同学量身定制，新手友好，让学生以亲身实践开源开发的方式，学会使用计算机自动化自己的科研/创新工作。案例以量化投资为主线，涉及 Bash、Python、SQL、BI、AI 等全技术栈，培养面向未来的数智化人才 (如数据工程师、数据分析师、数据科学家、数据决策者、量化投资人)。

Python

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

`JSDOM` 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

热门内容推荐

最新内容推荐

项目优选

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

JSDOM 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

相关内容推荐

热门内容推荐

最新内容推荐

项目优选

`JSDOM` 对象 API