为什么DOM元素最多可存在两份完全相同的命名空间声明？

你遇到的重复命名空间声明问题本质是HTML解析器和XML命名空间API的行为差异，核心逻辑如下：

1. 嵌入在HTML文档中的SVG会走HTML解析逻辑，而非严格的XML解析逻辑。你写在HTML源码里的xmlns:test属性会被解析为无命名空间的普通属性，属性名完整为xmlns:test，不会被识别为W3C标准的XMLNS命名空间属性。
2. 你用setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:test", "...")添加的属性，是属于XMLNS命名空间的标准命名空间声明，DOM中存储的属性信息为：命名空间URI=http://www.w3.org/2000/xmlns/，本地名=test，限定名=xmlns:test。
3. 这两种属性在DOM中是完全独立的两个属性，调用setAttributeNS只会覆盖同命名空间、同本地名的属性，不会修改HTML解析出来的普通xmlns:test属性，所以序列化（outerHTML输出）时两个属性都会被序列化为xmlns:test="xxx"，看起来就是重复声明。
4. 你看到的最多2个重复声明的原因也很简单：DOM中最多只能存在1个普通无命名空间的xmlns:test属性，加上1个XMLNS命名空间下的test属性，你重复调用setAttributeNS只会覆盖后者，不会新增，所以总数永远不会超过2。

Firefox开发者工具卡住是因为它的DOM渲染逻辑没有兼容同元素下存在两个相同限定名属性的场景，属于浏览器的实现缺陷。

1. 不要手动添加xmlns声明：DOM操作本身不需要手动声明命名空间，只要你创建元素、设置属性时使用带命名空间的API（createElementNS、setAttributeNS），正确传入命名空间URI，浏览器序列化DOM时会自动生成需要的命名空间声明，完全不需要手动处理xmlns:*属性。
2. 如果确实需要手动保证命名空间前缀存在，可以先做校验再添加：

   // 先检查test前缀是否已经绑定到目标命名空间
   if (svgRoot.lookupNamespaceURI('test') !== 'http://example.com/test') {
     svgRoot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:test", "http://example.com/test");
   }
   

3. 如果要清理已有的重复声明，可以先删除普通的无命名空间xmlns:test属性，再添加标准命名空间声明：

   // 删除HTML解析出来的普通属性
   if (svgRoot.hasAttribute('xmlns:test')) {
     svgRoot.removeAttribute('xmlns:test');
   }
   // 再添加标准命名空间声明
   svgRoot.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:test", "http://example.com/test");
   

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