DOMParser 注入 DOM 但注入后不应用 css 样式表？答案

【问题标题】：DOMParser injects DOM but does not apply css stylesheets once injected?DOMParser 注入 DOM 但注入后不应用 css 样式表？
【发布时间】：2013-02-21 02:42:20
【问题描述】：

我有一个小测试用例：

http://jsfiddle.net/9xwUx/1/

代码归结为以下内容（给定一个 id 为“target”的节点）：

var string = '<div class="makeitpink">this should be pink, but is not</div>';
var parser = new DOMParser();
var domNode = parser.parseFromString(string,"text/xml");
document.getElementById("target").appendChild(domNode.firstChild);

如果您运行测试用例，然后通过 firebug/chrome web 检查器检查目标节点并选择 jsfiddle 的 iframe 的 body 标记内的任何节点，并执行“编辑为 HTML”，则在任意位置添加一个随机字符作为字符串 [不是domnode的属性，要清楚]，然后“保存”，应用样式。但不是在那之前。说我很困惑是轻描淡写的。

任何人都可以澄清这里发生了什么吗？谢谢。

【问题讨论】：

标签： javascript dom domparser

【解决方案1】：

您可以将 mime 类型更改为 text/html 并执行以下操作：

var parser = new DOMParser()
var doc = parser.parseFromString(markup, 'text/html')
return doc.body.firstChild

我没有在所有浏览器上进行测试，但它可以在 Chrome 和 Firefox 上运行。我看不出它在其他地方不起作用的任何原因。

【讨论】：

【解决方案2】：

有点晚了，但原因是您已经使用text/xml 选项解析了这些，这意味着结果是 XML 节点，它们没有应用 CSS。当您右键单击并“编辑为 HTML”时，浏览器会将它们重新解释为 HTML，元素的更改将导致重绘，重新应用 CSS。

我一直在使用相对 hack-ish 但绝对可行的方法来解析我的内容，即创建一个临时元素并操作 innerHTML 属性，让浏览器进行解析：

var temp = document.createElement("div")
//assuming you have some HTML partial called 'fragment'
temp.innerHTML = fragment
return temp.firstChild

您在 jsfiddle 中已注明。基本上，当您使用text/xml 选项时，它归结为DOMParser 的输出是XMLDocument 的一个实例。

【讨论】：