Happy DOM 项目中 Element.getAttributeNames() 方法的浏览器兼容性问题分析

问题背景

在 DOM 操作中，Element.getAttributeNames() 是一个常用的方法，用于获取元素所有属性的名称列表。最近在 Happy DOM 项目的 v16 和 v17 版本中，开发者发现该方法的行为与主流浏览器不一致，而在 v15 版本中表现正常。

问题现象

当创建一个带有命名空间属性的元素时，Happy DOM v17 的输出与浏览器表现不同：

const element = document.createElement('div');
element.setAttribute('ns1:key', 'value1');
element.setAttribute('ns2:key', 'value1');
element.setAttribute('key1', 'value1');
element.setAttribute('key2', '');

console.log(element.getAttributeNames());
// 浏览器输出: ['ns1:key', 'ns2:key', 'key1', 'key2']
// Happy DOM v17 输出: ['ns2:key', 'key1', 'key2']

可以看到，Happy DOM v17 遗漏了带有 ns1: 前缀的属性名称。

技术分析

这个问题涉及到 DOM 规范中关于属性命名空间的处理。根据 DOM 规范：

1. 属性名称可以包含命名空间前缀（如 ns1:key）
2. getAttributeNames() 应该返回所有属性的完整名称，包括命名空间前缀
3. 属性的存储和检索应该保持原始设置的顺序

Happy DOM v17 的实现中可能对命名空间属性的处理存在逻辑缺陷，导致部分带有命名空间前缀的属性名称被错误地过滤或覆盖。

修复方案

项目维护者在收到问题报告后迅速响应，提交了修复代码。主要修正点包括：

1. 确保所有属性名称都被正确保留，无论是否包含命名空间前缀
2. 保持属性在设置时的原始顺序
3. 正确处理空值属性（如 key2=""）

后续影响

虽然核心问题已修复，但版本更新后部分用户报告了其他相关问题：

1. 在处理 SVG 文件的 XML 命名空间声明时出现错误
2. 在使用 @testing-library/dom 的 getByTestId 选择器时出现元素查找失败
3. 节点克隆操作中属性更新的副作用问题

这些问题表明 DOM 实现中的属性处理是一个复杂且容易出错的领域，需要特别注意边界情况和规范一致性。

最佳实践建议

对于开发者使用 Happy DOM 或其他类似库时：

1. 在测试环境中验证关键 DOM API 的行为是否与浏览器一致
2. 谨慎处理带有命名空间的属性
3. 避免直接修改克隆节点的测试属性，考虑使用其他测试标识方式
4. 关注库的更新日志，及时升级到修复版本

Happy DOM 作为一个用于测试环境的 DOM 实现，保持与浏览器一致的行为至关重要。这次问题的快速修复展示了开源社区响应问题的效率，同时也提醒我们在使用这类工具时需要关注其与标准实现的差异。