首页
/ jsdom 技术文档

jsdom 技术文档

2024-12-15 15:54:11作者：乔或婵
jsdom
A JavaScript implementation of various web standards, for use with Node.js
项目地址：https://gitcode.com/gh_mirrors/js/jsdom

1. 安装指南

环境要求

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

安装步骤

  1. 打开终端或命令行工具。
  2. 使用 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

相关内容推荐

1 Fabric.js 技术文档2 Apricot 技术文档3 HTML5解析器技术文档4 推荐开源项目：jsdom-worker - 测试Web Workers在Jest中的新途径！5 Rickshaw 项目技术文档6 浏览器环境模拟器：browser-env7 jQuery 2.1.x 在 Node.js 中的使用指南8 Readability-js 项目教程9 推荐开源项目：Taxi-Rank - 超快速的JSDom Selenium WebDriver API10 Universal JSON Schema 项目教程
热门项目推荐
相关项目推荐

热门内容推荐

1 开发者路线图项目教程2 Vue.js 教程与指南3 探索Vue 2的持久魅力：一个开源项目的深度解析4 开源项目指南：Linux 内核5 推荐项目：探索 Linux 内核的奥秘6 Linux内核项目技术文档7 TensorFlow 开源项目教程8 TensorFlow：开启机器学习新纪元9 TensorFlow 开源项目指南10 探索Oh My Zsh：提升你的终端体验

最新内容推荐

《深入掌握OpenPTrack：安装与实战指南》 《RBM-MNIST深度学习算法安装与实战指南》 《Boundingmesh项目实战指南：安装、配置与深度探索》 探索三维世界：cpu_tsdf开源项目的安装与使用教程 探索Embxx：嵌入式C++库的安装与使用指南 深入解析Valijson：安装、使用与实践指南 《稳健点集配准算法GMMReg的安装与使用教程》 《luacppinterface：C++与Lua混合编程的桥梁》 深入掌握makerscanner：安装与使用指南 《SoftModem：开源的Arduino与手机通信解决方案》

项目优选

收起
MateChatMateChat
前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。 官网地址：https://matechat.gitcode.com
383
36
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
611
115
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
205
58
Ffit-framework
FIT: 企业级AI开发框架，提供多语言函数引擎（FIT）、流式编排引擎（WaterFlow）及Java生态的LangChain替代方案（FEL）。原生/Spring双模运行，支持插件热插拔与智能聚散部署，无缝统一大模型与业务系统。
Java
113
13
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
45
29
cjoycjoy
a fast，lightweight and joy web framework
Cangjie
11
2
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！
Cangjie
286
79
hertzhertz
Go 微服务 HTTP 框架，具有高易用性、高性能、高扩展性等特点。
Go
7
1
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
60
48
open-eBackupopen-eBackup
open-eBackup是一款开源备份软件，采用集群高扩展架构，通过应用备份通用框架、并行备份等技术，为主流数据库、虚拟化、文件系统、大数据等应用提供E2E的数据备份、恢复等能力，帮助用户实现关键数据高效保护。
HTML
90
65