javascript - 如何在根 元素之前插入注释？

Question

如何在根节点前添加注释节点<svg>元素但在 xml 序言之后？

或者在序列化的 DOM 上插入带有正则表达式的评论会不会占用更多资源？

Answer 1

根元素(即不包括 xml 序言和 DTD)位于 documentElement 中。您可以将 insertBefore 与它一起使用:

var s = '<?xml version="1.0" encoding="ISO-8859-1"?>\n' +
        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"\n' + 
        '    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
        '<svg width="100%" height="100%" version="1.1" ' +
        '     xmlns="http://www.w3.org/2000/svg">\n' +
        '  <circle cx="100" cy="50" r="40" stroke="black" ' +
        '          stroke-width="2" fill="red"/>\n' +
        '</svg>',
    doc = new DOMParser().parseFromString(s, 'text/xml');

// insert a comment node before the root node
doc.insertBefore(doc.createComment('foo'), doc.documentElement);

要检查，new XMLSerializer().serializeToString(doc) 输出:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--foo-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

请注意，某些浏览器(我相信是 WebKit)将从序列化输出中省略序言(无论如何它是可选的)。然而，注释节点在 DTD 之后仍然存在。

至于哪个更便宜，我不确定。如果除了这件事之外，您不需要 DOM 形式的字符串，那么可能不值得通过 DOM 解析器(尤其是无论如何只是将其序列化回字符串)。