javascript - 为什么 document.documentElement.outerHTML 中的 (') of opener and closer in HTML attribute is rendered as (' ') ？以及如何预防？

Question

为什么 HTML 属性中的 opener 和 closeer 的单引号 (') 在 document.documentElement.outerHTML 中呈现为双引号 ('')？以及如何预防？

我的 html 页面中有这个元素:

<div data-css="mo-cssclassvalueuseditems" class='{MO-CSS-CLASS value="UsedItems"}'>
</div>

当我尝试通过document.documentElement.outerHTML获取整个html时，结果变成了这样:

<div data-css="mo-cssclassvalueuseditems" class="{MO-CSS-CLASS value=&quot;UsedItems&quot;}">
</div>

对于"来说，这根本不重要。但是对于单引号(')的开头和结尾，为什么它被渲染为双引号('')而不是单引号(')？

有什么解决方案可以保持引号不变吗？

Answer 1

当 DOM 被加载时，它会变成 DOM 数据结构，表示所有元素和属性之间的逻辑关系。它不保留源代码。因此它只包含 class 属性包含值 {MO-CSS-CLASS value="UsedItems"} 的信息。您在原始 HTML 中使用单引号或双引号的事实在转换为 DOM 时丢失了。当通过读取其 innerHTMl 或 outerHTML 属性来序列化元素时，属性值始终用双引号引起来。