Happy DOM 项目实现 select 多选元素的 selectedOptions 属性支持

在 Web 开发测试中，DOM 模拟库扮演着重要角色。Happy DOM 作为一个轻量级的 DOM 实现，最近完成了对 HTMLSelectElement 的 selectedOptions 属性的支持，这对于测试包含多选 select 元素的 React 组件尤为重要。

selectedOptions 属性的重要性

selectedOptions 是 HTMLSelectElement 接口的一个属性，特别针对设置了 multiple 属性的 select 元素。它返回一个包含所有当前选中 option 元素的 HTMLCollection。这个属性在以下场景非常有用：

1. 表单处理中获取用户选择的多个选项
2. 测试框架中验证多选下拉框的状态
3. 动态更新 UI 基于用户选择

Happy DOM 的实现细节

Happy DOM 在最新版本中完整实现了这个属性，其行为与浏览器原生实现保持一致。当 select 元素设置了 multiple 属性时，selectedOptions 会返回一个包含所有选中项的集合；对于单选 select，则只返回包含单个选中项的集合。

实现的核心在于正确维护 select 元素内部 option 元素的选中状态，并实时更新 selectedOptions 的返回值。这需要考虑以下情况：

• 用户通过点击选择/取消选择选项
• 通过 JavaScript 直接修改 option 的 selected 属性
• 通过设置 select 的 value 属性改变选中项

对测试场景的影响

这一改进使得开发者可以更轻松地将测试从 jsdom 迁移到 Happy DOM，特别是在测试 React 组件时。现在可以像在真实浏览器中一样，通过 selectedOptions 属性来断言多选下拉框的状态。

例如，在测试中现在可以这样编写断言：

const select = document.querySelector('select[multiple]');
// 模拟用户选择
select.options[1].selected = true;
select.options[3].selected = true;

// 断言选中项
expect(select.selectedOptions.length).toBe(2);
expect(select.selectedOptions[0]).toBe(select.options[1]);

兼容性考虑

Happy DOM 的实现确保了与主流浏览器一致的行为，包括：

• 返回的 HTMLCollection 是实时的，会随选中状态变化自动更新
• 对于未设置 multiple 属性的 select 元素，selectedOptions 仍会返回集合（包含单个选中项）
• 属性访问的性能经过优化，不会在每次访问时重新计算

总结

Happy DOM 对 selectedOptions 属性的支持完善了其对表单元素的模拟能力，使得开发者可以更准确地在测试中模拟和验证多选下拉框的行为。这一改进进一步缩小了测试环境与真实浏览器环境的差距，为前端测试提供了更可靠的保障。