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

【问题标题】：Why is DOMParser not preserving inline styles of parsed DOM?为什么 DOMParser 不保留已解析 DOM 的内联样式？
【发布时间】：2016-11-15 02:40:00
【问题描述】：

我只是试图将 JavaScript 字符串解析并附加为 DOM 元素。我找到了两种快速的方法来做到这一点，其中一种是使用DOMParser，如this popular SO answer 所示。两种方法都有效，但是，DOMParser 方法由于某种原因不尊重我定义的内联样式 - 即使两种方法都注入了 exact same 动态标记。考虑以下...

<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 - 复制演示

【问题讨论】：

标签： javascript html dom domparser

【解决方案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 返回一个 HTMLDocument。

小提琴：https://jsfiddle.net/wLnesqrb/8/

【讨论】：

hmm，如果您检查节点，该方法似乎正在注入整个 html 文档。无论哪种方式都可以解决，是的，我可以看到这种风格。知道为什么使用 text/xml 的动态节点没有样式化，即使它应该根据检查 DOM 进行？
这会将段落包装在 html 和 body 元素中。 firstChild 将是 html 元素。
+1，在查看了@Oriol 的答案后，我完全理解为什么在样式方面会发生这种情况，但这确实有帮助，谢谢！跨度>
@scniro 欢迎您，但是您已经得到了答案，但我编辑了我的答案只是为了解决您的遍历问题以到达
元素。

【解决方案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);

【讨论】：

哇！好东西。这确实解释了为什么非常感谢你:) @Deep 的另一个解决方案也可以工作，但是涉及整个 html 文档和更多的遍历
我明白了，没有xmln=，浏览器不知道解析的文本是HTML吗？在 OP Fiddle 中，Firefox 没有意识到 p 是 p（没有应用浏览器样式，例如边距）。
@AndyM 是的，由于解析器解析为text/xml，因此元素没有 HTML 的语义。在 DOM 中，p 将只是一个 Element 实例，而不是 HTMLElement 实例，因此它不会有像 style 这样的属性。

【解决方案3】：

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

但是如果您希望您的代码也可以在 XML 文档中工作，而不仅仅是 HTML，那么添加命名空间会更安全。

【讨论】：