JavaScript生成XSPF XML时<track>元素意外添加空xmlns属性的问题

这个问题我太熟了！你遇到的空xmlns属性是因为创建<track>和<location>元素时，没有指定XSPF的命名空间，导致这些元素不在根元素的命名空间下，XML序列化器就会自动加上空xmlns来明确它们不属于任何命名空间，和根的命名空间区分开。

问题根源 #

XSPF的根元素<playlist>已经声明了命名空间http://xspf.org/ns/0/，但你用普通的createElement创建子元素时，这些元素默认不属于任何命名空间。XML规范要求不同命名空间的元素要明确标识，所以序列化器就给<track>加了空xmlns属性来区分。

解决方案 #

所有XSPF相关的子元素都需要属于同一个命名空间，你需要把createElement替换成createElementNS方法，传入XSPF的命名空间URI作为第一个参数。

修改后的代码如下：

const xspfTemplate = `<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
    </trackList>
</playlist>`;
const parser = new DOMParser();
const serializer = new XMLSerializer();
const xspfDoc = parser.parseFromString(xspfTemplate, 'text/xml');

// 定义XSPF命名空间常量，和根元素的xmlns保持一致
const XSPF_NAMESPACE = 'http://xspf.org/ns/0/';

// 用createElementNS创建属于XSPF命名空间的元素
let track = xspfDoc.createElementNS(XSPF_NAMESPACE, 'track');
let location = xspfDoc.createElementNS(XSPF_NAMESPACE, 'location');
location.textContent = encodeURIComponent('my album/my music.mp3');
track.append(location);
xspfDoc.querySelector('trackList').append(track);

let xspfString = serializer.serializeToString(xspfDoc);
xspfOutput.append(xspfString);

关键修改点 #

• 新增了XSPF_NAMESPACE常量，和根元素的xmlns值完全一致，方便统一维护
• 创建track和location元素时使用createElementNS，确保它们属于XSPF命名空间
• 这样创建的元素和根元素同属一个命名空间，序列化时就不会再自动添加空xmlns属性

修改后你得到的XML输出就会和预期完全一致，<track>元素不会带多余的空xmlns属性，完全符合XSPF规范。

备注：内容来源于stack exchange，提问作者Douglas Silva