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

登录后查看全文

项目优选

收起

leetcode

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

Java

Cangjie-Examples

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

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

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

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

TypeScript

365

CangjieMagic

基于仓颉编程语言构建的 LLM Agent 开发框架，其主要特点包括：Agent DSL、支持 MCP 协议，支持模块化调用，支持任务智能规划。

Cangjie

578

CangjieCommunity

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

Markdown

977

MateChat

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

688

金融AI编程实战

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

Jupyter Notebook

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

`JSDOM` 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

热门内容推荐

最新内容推荐

项目优选

jsdom 技术文档

1. 安装指南

环境要求

安装步骤

2. 项目的使用说明

基本用法

自定义 jsdom

执行脚本

模拟可视化浏览器

3. 项目API使用文档

JSDOM 对象 API

加载子资源

4. 项目安装方式

使用 npm 安装

使用 yarn 安装

相关内容推荐

热门内容推荐

最新内容推荐

项目优选

`JSDOM` 对象 API