Node.js中使用jQuery操作图片返回空HTMLImageElement问题

核心问题 #

你的代码存在两个关键问题：

1. DOM上下文不一致：你创建了两个独立的JSDOM实例，分别提取了window和document，但jQuery绑定的是第一个实例的window，全局document却指向第二个实例的。这种跨上下文的DOM操作会导致元素无法被正确识别和修改。
2. 元素显示误解：Node.js环境下直接打印DOM元素对象时，会显示HTMLImageElement {}，这是因为Node.js控制台不会序列化DOM元素的所有内部属性，不代表元素是空的，只是看不到具体属性而已。

修复后的代码 #

const { JSDOM } = require("jsdom");
// 只创建一个JSDOM实例，确保window和document上下文统一
const dom = new JSDOM();
const { window } = dom;
const { document } = window;
// 全局挂载统一的window和document
global.window = window;
global.document = document;

// 让jQuery绑定到统一的window上下文
const $ = require('jquery')(window);

var HTML = `<p><img alt="2SolGivenWeForSo,WeWeV₁ifFromلية{I NodeneedaboveFromCircuitNumberHerehaveVzrequireqov+toisabovei=" src="https://media.cheggcdn.com/coop/bdc/bdcaa47c-5ae3-4694-a53f-c4310faf5ba6/1658405118815_Net_1.jpg" style="height:3360px;width:1940px"><img alt="ApplyWeSo,R↓!Nodal↑analysisI, t Iz t Iz = 0.have,From17I, + I + Iz1₁₂-02T2015I, + I₂ + I3 = 0.I₁ + (14+ 15)" src="https://media.cheggcdn.com/coop/450/45080cff-9a57-4bc0-a09c-e29a88de45d4/1658405138263_CamScanner07-21-202217.33_1.jpg" style="height:3176px;width:1844px"><img alt="V₁Substitue1111FromThe介-From- 716V₁N₁ - V₂16- 7V₂N₂V₁₂ - V₂ =NSubstitue162-NolauationValue21642" src="https://media.cheggcdn.com/coop/2ba/2bac1f60-655a-4aa4-a2ae-37703cd7903f/1658405154236_Net_3.jpg" style="height:3164px;width:1824px"></p>`;

// 先将HTML字符串转为jQuery对象，确保元素处于统一的DOM树中
const $content = $(HTML);

// 查找并处理所有img元素
$content.find('img').each(function() {
    // 提取当前宽度数值
    const currentWidth = parseInt($(this).css('width'), 10);
    // 计算新宽度
    const newWidth = currentWidth / 2;
    // 修改宽度样式
    $(this).css('width', `${newWidth}px`);
    // 打印具体属性确认修改结果，而不是直接打印元素对象
    console.log(`修改后宽度：${$(this).css('width')}`);
});

// 如果需要获取修改后的完整HTML字符串
const modifiedHTML = $content.prop('outerHTML');
console.log('修改后的HTML：', modifiedHTML);

关键说明 #

• 始终使用同一个JSDOM实例的window和document，避免跨上下文的DOM操作冲突。
• 不要直接打印DOM元素对象，而是打印具体的属性（如style.width）来验证修改效果。
• 处理字符串HTML时，先转为jQuery对象再用find()查找元素，确保操作的是同一个DOM环境中的节点。

内容的提问来源于stack exchange，提问作者vpn