为什么 DOMParser 不保留已解析的 DOM 的内联样式？

Question

我只是想将 JavaScript 字符串解析并附加为 DOM 元素。我找到了两种快速的方法来做到这一点，其中之一是使用 DOMParser as seen in this popular SO answer。这两种方法都有效，但是，DOMParser 方法出于某种原因不遵守我定义的内联样式——即使这两种方法都注入了 完全相同的 动态标记。考虑以下...

<div></div>

var parent = document.getElementsByTagName('div')[0]

// ---- case 1 ---------------

var parser = new DOMParser();
var node = parser.parseFromString('<p style="color: red">foo</p>', 'text/xml').firstChild;
parent.appendChild(node);

// ---- case 2 ---------------

var wrapper= document.createElement('div');
wrapper.innerHTML= '<p style="color: red">foo</p>';
var node2 = wrapper.firstChild;
parent.appendChild(node2);

每个方法相应地注入节点，DOM 反映以下...

<div>
    <p style="color: red">foo</p>
    <p style="color: red">foo</p>
</div>

不过，只有最后一个是红色的！知道这里可能发生什么吗？

JSFiddle - 再现演示

Answer 1

CSS 如果您使用如下方法，将应用

var node = parser.parseFromString('<p style="color: red">foo</p>', 'text/html').firstChild.lastChild.firstChild;

我在这里使用 'text/html' 根据文档 https://developer.mozilla.org/en/docs/Web/API/DOMParser 使用 text/html returns HTMLDocument。

fiddle: https://jsfiddle.net/wLnesqrb/8/

Answer 2

那是因为你没有设置命名空间。 style 属性在 XML 中没有任何特殊含义：

var str = '<p xmlns="http://www.w3.org/1999/xhtml" style="color: red">foo</p>';
var node = new DOMParser().parseFromString(str, 'text/xml').firstChild;
document.body.appendChild(node);

Answer 3

var str = '<p style="color: red">foo</p>';
var frag = new DocumentFragment();
frag.innerHTML = str;
document.body.appendChild(frag);

但是如果您希望您的代码也能在 XML 文档中工作而不仅仅是 HTML。

，则添加名称空间会更安全

为什么 DOMParser 不保留已解析的 DOM 的内联样式？

Why is DOMParser not preserving inline styles of parsed DOM?

javascript

html

dom

domparser