使用serializeToString()处理HTML head为何自动添加xmlns属性？

这个问题本质是HTML文档模型与XML序列化规则的差异导致的，咱们来理清楚背后的逻辑：

• 首先，当你用DOMParser().parseFromString(html, 'text/html')解析HTML字符串时，得到的是一个标准的HTMLDocument对象，其中所有的HTML元素（包括<head>）都默认属于http://www.w3.org/1999/xhtml这个命名空间——只不过在HTML语法里，这个命名空间是隐含的，不需要显式写出来，浏览器会自动识别。

• 但你用到的XMLSerializer是专门为XML文档设计的序列化工具，它遵循XML的规则：所有处于命名空间下的元素，在序列化时必须显式声明对应的xmlns属性。所以当它处理HTML文档里的<head>元素时，就会把原本隐含的XHTML命名空间给显式输出出来，也就是你看到的xmlns="http://www.w3.org/1999/xhtml"。

怎么解决这个问题？ #

如果你的目标是得到标准的HTML格式字符串，别用XMLSerializer，直接用HTML元素自带的outerHTML属性就好：

let html = `<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body>Hello </body> </html>`;
let newHTMLDocument = new DOMParser().parseFromString(html, 'text/html');
let head = newHTMLDocument.head.outerHTML; // 这里改用outerHTML
console.log(head);

这样输出的就是符合预期的<head><title>Title</title></head>，不会带有额外的xmlns属性。

简单总结：XMLSerializer是为XML服务的，HTML有自己的序列化方式，用对工具就不会出现这种问题啦～

内容的提问来源于stack exchange，提问作者GTS Joe