具有 xmlns 的元素与使用具有相同 namespaceURI 的 createElementNS 创建的元素有何不同？

Posted 2023-02-16

【中文标题】具有 xmlns 的元素与使用具有相同 namespaceURI 的 createElementNS 创建的元素有何不同？

【英文标题】：How is an element with xmlns different from one created with createElementNS with the same namespaceURI?

【发布时间】：2021-09-28 14:39:17

【问题描述】：

假设我们有以下 XML：

<ns:xml xmlns:ns="AAA">
  <predefined xmlns="AAA"/>
</ns:xml>

在浏览器中运行以下代码时：

const doc = new DOMParser().parseFromString(XML, 'text/xml');

const added = doc.createElementNS('AAA', 'added');
doc.documentElement.appendChild(added);

只是序列化added 返回<added xmlns="AAA"/> 但是在序列化doc 时，结果是

<ns:xml xmlns:ns="AAA">
  <predefined xmlns="AAA"/>
  <a:added />
</ns:xml>

为什么predefined 和added 的行为不同？ 或者反过来问： 如何使用 createElementNS（和其他 DOM API）创建像 predefined 这样的元素？

【参考方案1】：

要使added 的行为类似于predefined，您需要将xmlns 属性显式设置为与namespaceURI 参数相同的命名空间：

const added = doc.createElementNS('AAA', 'added');
added.setAttribute('xmlns', 'AAA');
doc.documentElement.appendChild(added);

另外请注意，使用 mime 类型 text/html 对其进行解析会更改（解析和）序列化的行为，从而导致以下结果：

<ns:xml xmlns:ns="AAA">
  <predefined xmlns="AAA"></predefined>
  <added xmlns="AAA"></added>
</ns:xml>