nodejs之jsdom插件，运行浏览器环境

最新推荐文章于 2025-03-10 23:54:04 发布

局外人LZ

最新推荐文章于 2025-03-10 23:54:04 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签： node.js

本文链接：https://blog.csdn.net/randy521520/article/details/133516671

版权

前端专栏收录该内容

58 篇文章

订阅专栏

本文介绍了如何在Node.js中安装和使用jsdom库，构建HTML文档的JavaScript环境，支持子资源加载、虚拟控制台、事件监听以及DOM操作，适合理解和开发无头浏览器环境或处理HTML文档的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.npmjs.com/package/jsdom

一、安装依赖

npm install jsdom

二、用法

var jsdom = require('jsdom')
var { JSDOM } = jsdom;
var dom =  new JSDOM(`<!DOCTYPE html><html lang="cn"><head></head><body></body></html>`);
window = dom.window
document=window.document
navigator=window.navigator  
//使用jq     
const $ = require( "jquery" )( window );

三、方法

new JSDOM(domStr,option) 实例化一个dom环境

new JSDOM('',{
    url: 'https://example.org/',  // window.location，document.URL
    referrer: 'https://example.org/', // document.referrer
    contentType: 'text/html',//内容类型
    storageQuota: 10000000, //缓存大小
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36',//userAgent请求头
    includeNodeLocations: true,//允许查找dom位置，
    runScripts: 'dangerously',//启用在页面内执行js，outside-only在外部执行js：window.eval()
    cookieJar: new jsdom.CookieJar(),//cokkie
    pretendToBeVisual:true,//因为JSDOM是无头的,该配置可假装是有头的，window.requestAnimationFrame() 、window.cancelAnimationFrame()
    resources:new jsdom.ResourceLoader(option),//jsdom不会加载任何子资源（脚本、样式表、图像或iframe），该配置加载子资源
    virtualConsole:new jsdom.VirtualConsole(),//虚拟控制台
    beforeParse(window) {}
})

JSDOM.fromURL() 通过url 实例化dom环境

JSDOM.fromURL('https://www.baidu.com/', { 
    //同new JSDOM 中的option 
}).then(dom => {
  console.log(dom.serialize());
});

JSDOM.fragment()通过字符串创建dom

const document = JSDOM.fragment('<p>Hello<span>span</span></p><p><strong>Hi!</strong></p>');

console.log(document.querySelector('p').innerHTML)

JSDOM.fromFile() 通过文件实例化dom环境

JSDOM.fromFile('stuff.html', {
    //同new JSDOM 中的option
}).then(dom => {
  console.log(dom.serialize());
});

页面内执行js：runScripts

var dom = new JSDOM('<script>console.log(1)</script>', { runScripts: "dangerously"})

new jsdom.ResourceLoader(option) 加载子资源

const resources = new jsdom.ResourceLoader({
    proxy: 'http://127.0.0.1:9001', //HTTP代理的地址。
    strictSSL: false, //禁用SSL证书
    userAgent: 'Mellblomenator/9000',//userAgent请求头
})
const dom = new JSDOM('', { resources });

new jsdom.VirtualConsole() 虚拟控制台

const virtualConsole = new jsdom.VirtualConsole()
const dom = new JSDOM(``, { virtualConsole });

//监听事件
virtualConsole.on("error", () => { ... });
virtualConsole.on("warn", () => { ... });
virtualConsole.on("info", () => { ... });
virtualConsole.on("dir", () => { ... });
//重定向控制台到node
virtualConsole.sendTo(console,{ 
    omitJSDOMErrors: true //jsdom报错信息
})

new jsdom.CookieJar() cookie

const cookieJar = new jsdom.VirtualConsole(store, options)
const dom = new JSDOM(``, { cookieJar });

dom.serialize() 获取序列化dom

dom.nodeLocation(bodyEl) 查找位置

const dom = new JSDOM('<body><p></p></body>', {
  includeNodeLocations: true
})

dom.window.onload = () => {
    console.log(dom.nodeLocation(dom.window.document.body))
}