6

我有一个小测试用例：

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，要清楚]，然后“保存”，就会应用样式。但不是在那之前。说我很困惑是轻描淡写的。

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

4

2 回答 2

5

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

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

我没有在每个浏览器上进行测试，但它适用于 Chrome 和 Firefox。我看不出它在其他地方不起作用的任何理由。

于 2017-04-18T09:11:39.547 回答
1

有点晚了，但原因是您已经使用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 中已经注意到了这一点。基本上，它归结为当您使用该选项时DOMParser的一个实例的输出。XMLDocumenttext/xml

于 2013-07-09T05:58:11.300 回答