jsdom笔记
时间: 2025-04-06 21:03:30 浏览: 40
### 关于 JSDOM 的学习笔记
JSDOM 是一个用于在 Node.js 环境下模拟浏览器行为的库。它允许开发者创建虚拟 DOM 和执行基于 DOM 的操作,而无需实际运行在一个完整的浏览器环境中[^6]。
#### 什么是 JSDOM?
JSDOM 提供了一个轻量级的 HTML 解析器和 DOM 实现,能够解析 HTML 文档并将其转换为可编程的对象模型。这使得开发者可以在服务器端处理网页内容、测试前端代码以及构建无头浏览器环境下的自动化工具[^7]。
以下是几个常见的应用场景:
- **爬虫开发**:利用 JSDOM 抓取动态加载的内容。
- **单元测试**:模拟真实的浏览器环境以测试前端逻辑。
- **HTML 渲染服务**:生成静态页面或将模板渲染成最终的 HTML 输出。
#### 安装与初始化
要开始使用 JSDOM,请先安装依赖包 `jsdom`:
```bash
npm install jsdom
```
接着可以通过以下方式引入模块并创建一个新的文档实例:
```javascript
const { JSDOM } = require("jsdom");
// 创建一个简单的 HTML 字符串作为初始输入
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, {
url: "https://example.org/",
});
console.log(dom.window.document.querySelector("p").textContent);
```
上述例子展示了如何定义基本结构并通过查询选择器访问节点[^8]。
#### 动态修改 DOM 节点
除了读取现有内容外,还可以借助 JSDOM 修改已有的 DOM 结构。比如新增子元素或者调整属性值等操作均支持标准 W3C 接口调用模式[^9]:
```javascript
const { JSDOM } = require("jsdom");
let dom = new JSDOM(`<div id="container"></div>`);
let containerElement = dom.window.document.getElementById('container');
if (containerElement){
let paragraphNode = dom.window.document.createElement('p');
paragraphNode.textContent = 'This is a dynamically added text.';
// 将新段落追加至容器内部
containerElement.appendChild(paragraphNode);
}
console.log(dom.serialize());
/* Output should be similar to:
<html>
<head></head>
<body>
<div id="container"><p>This is a dynamically added text.</p></div>
</body>
</html>*/
```
此片段说明了怎样向空白 div 中注入新的 p 标签及其文本填充过程[^10]。
#### 处理外部资源请求
当涉及到 AJAX 或者其他网络交互时需要注意,默认情况下所有的 fetch 请求会被拦截下来并不会真正发送出去除非特别配置允许联网选项[^11]。
如果想让某些特定 URL 可被正常载入,则可以自定义设置 resourceLoader 参数:
```javascript
const { JSDOM } = require("jsdom");
new JSDOM(
`<img src="/image.jpg">`,
{
resources: "usable",
runScripts:"outside-only"
}
).then((domInstance)=>{
console.log(domInstance.window.Image.prototype.toString());
});
```
这里启用了图片标签加载机制同时开启了脚本执行权限以便更贴近真实场景需求[^12].
---
###
阅读全文
相关推荐
















