.outerHTML 中不存在名称空间属性

Question

在 HTML5/JavaScript 中，如果我以编程方式创建命名空间 dom 节点，如下所示：

svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')

节点 'knows' 它是自己的命名空间，我可以像这样检索它：

svgElt.namespaceURI // result: "http://www.w3.org/2000/svg"

但是命名空间不被视为 "normal" 属性：

svgElt.getAttribute('xmlns') // result: null

因此以编程方式创建的节点的行为不同于等效的 "straight" 节点

<svg xmlns="http://www.w3.org/2000/svg" id="mySVG"></svg>

.getAttribute 适用于：

document.getElementById('mySVG').getAttribute('xmlns') // result: "http://www.w3.org/2000/svg"

当我使用 .outerHTML 并需要结果中包含名称空间信息时，这是一个潜在的问题。以编程方式创建的节点的名称空间信息可能会丢失，我可能必须手动添加它；这似乎是一回事 "I shouldn't have to care about" - 因此是个问题。

一个需要 .outerHTML 的例子（见 this question，Hubert OG 的回答），当你想将内联 SVG 节点转换成 Image 通过将图像源设置为数据 url ，如

'data:image/svg+xml,' + your_svg_element.outerHTML

我做的是

svgNode.setAttribute('xmlns', svgNode.namespaceURI)

SVG -> 图像转换（正如我实现的那样）没有这个技巧就无法工作；另请参阅我对上面链接问题的回答。

有没有更好/更优雅的方法来做到这一点？ svgElt.getAttribute('xmlns') 的 objective 返回 null 是什么？缺陷还是特征？

Answer 1

请先阅读问题下的评论。

下面是我们如何通过“xhtml-化”dom 节点，然后调用 .outerHTML 来获取带有命名空间信息的 html，然后调用 .outerHTML xhtml（缺少 html 的命名空间信息）。

function outerXHTML(node){
    var nsx = "http://www.w3.org/1999/xhtml";
    var xdoc = document.implementation.createDocument(nsx, 'html');
    xdoc.documentElement.appendChild(node);
    return node.outerHTML;
}
function innerXHTML(node){
    var nsx = "http://www.w3.org/1999/xhtml";
    var xdoc = document.implementation.createDocument(nsx, 'html');
    xdoc.documentElement.appendChild(node);
    return node.innerHTML;
}

（如果节点应保留在原始文档中，请先克隆节点。）

related question (x/html conversion)

related question (document creation)

fiddle for testing the html to xhtml conversion

test Kaiido version with arbitrary HTML string from textbox

Answer 2

您可以为此简单地使用 XMLSerializer，这会将您的 DOM 树字符串化为 xml，从而保留命名空间。

const svgElt = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
const serialized = new XMLSerializer().serializeToString(svgElt);
console.log(serialized);

.outerHTML 中不存在名称空间属性

namespace attributes not present in .outerHTML

javascript

xhtml

svg

dom

namespaces