如何使用JSDom获取HTML元素的属性值？

问题场景 #

维护一个仅返回HTML响应的老旧MVC单层应用，需要从返回的HTML里提取指定输入框的值并赋值给变量，但尝试后只输出JSDOM NodeList {}，不知道怎么正确获取目标值。

用户的示例代码：

const { JSDOM } = require('jsdom');

const kmsiResponse = await post(
      {
        ctx: loginCtx,
        hpgRequestId: loginSessionId,
        flowToken: loginSft,
        canary: loginCanary,
      },
      { url: 'myUrl' }
    );

const kmsiResponseText = await kmsiResponse.text();
const kmsiDom = new JSDOM(kmsiResponseText);
console.log('JSDOM', kmsiDom.window.document.getElementsByName('id_token'));

对应的HTML内容：

<form method="POST" name="hiddenform" action="https://someUrl/">
   <input type="hidden" name="id_token" value="xxxxxxxxxx">
</form>

输出结果：
JSDOM NodeList {}

解决方法 #

getElementsByName()返回的是NodeList元素集合，哪怕只有一个匹配元素，也得通过索引（比如[0]）拿到具体的DOM元素，再读取它的value属性。

修改后的代码如下：

const { JSDOM } = require('jsdom');

const kmsiResponse = await post(
      {
        ctx: loginCtx,
        hpgRequestId: loginSessionId,
        flowToken: loginSft,
        canary: loginCanary,
      },
      { url: 'myUrl' }
    );

const kmsiResponseText = await kmsiResponse.text();
const kmsiDom = new JSDOM(kmsiResponseText);
// 获取集合中的第一个元素，读取其value属性
const idToken = kmsiDom.window.document.getElementsByName('id_token')[0]?.value;
console.log('提取到的id_token:', idToken);

额外技巧 #

• 用?.可选链操作符能避免找不到匹配元素时报错，让代码更健壮。
• 也可以用querySelector()直接定位元素，写法更简洁：

const idToken = kmsiDom.window.document.querySelector('input[name="id_token"]')?.value;

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