Javascript .innerHTML将丢失HTML语法格式

我刚刚注意到浏览器忽略了HTML格式（例如对齐此代码段中的两个属性）：

你得到了输出

<div id="contained" other-prop="some value">
</div>

不管它是如何在源代码中编写的，甚至是直接在JavaScript中设置.innerHTML

当用户在JS中编写元素时，是否可以查询该元素对应的页面源？有空白和所有的东西。我可以看出，当用户使用DOM操作修改元素时会出现问题，在这种情况下，如果

原始用户格式将保留所有内容，不受修改或更改的影响

可以在用户在页面加载时获取原始源代码，而无需修改DOM

一个代码段，以便您可以看到它的运行：

var container=document.getElementById（'container'）；
log（container.innerHTML）；
container.innerHTML=`
`;
log（container.innerHTML）；
container.children[0].setAttribute（'modification'，''）；
log（container.innerHTML）

这根本不可能。
将代码视为计算机之间的一条信息，以表示可视表示，其中空格并不重要。
使用传统方法，不，这是不可能的。HTML在呈现页面时总是丢弃多余的空白，不幸的是，无法禁用此功能

简而言之，当您编写HTML代码时，您向浏览器提供了关于呈现内容的指示，而不是如何呈现的指示。加载页面时，浏览器会解释这些指令并输出它认为需要的内容的呈现

当您使用
innerHTML
时，您请求浏览器将呈现的内容转换回HTML指令。它几乎完美地做到了这一点，但它不能也不会将删除的空白放回原处；由于该信息不会影响页面的外观，因此浏览器在渲染时会忽略该信息

如果您对将所有最佳实践抛出窗口感到满意，那么理论上可以使用请求向服务器查询您所在页面的HTML内容，然后将响应解析为纯文本

然而，这对于您的特定用例来说是有问题的，因为如果您想从本文中检索特定元素，您没有任何DOM方法或实用程序可供使用。如果您尝试使用或类似的方法解析纯文本，文本将再次像HTML一样运行，并丢弃多余的空白

<>你最好的选择，如果你真的想这么做的话，就是使用正则表达式或<代码> .NoxOf（）/<代码>来找到你在明文响应中间寻找的元素。不过，我真的想强调的是，这是非常糟糕的做法，不应该用于研究之外的任何事情

还需要注意的是，如果您试图处理的页面是客户端生成的SPA（单页应用程序），则此解决方案将无法工作。如果您正在处理客户端SPA（例如，React、Angular、Vue等），则可以对渲染脚本进行反向工程，以找到包含空格的元素的定义。但是，除此之外，您可能运气不好。
无法读取浏览器用来组成页面的流。@TravisJ有没有相关的参考资料？（在文档的某个地方提到了/另一个SO线程…？）流是在应用程序级别读取的。这方面没有“文档”，因为这基本上是常识，就像没有文档说明JavaScript无法从网页访问注册表一样。访问流将退出沙箱，这基本上意味着您已经获得了对操作系统指令执行级别的访问权，因为这是应用程序执行的地方。@TravisJ找到您了。浏览器是否也不会通过某些API公开流的内容？@PeeyushKushwaha浏览器不会在任何API中公开页面的原始数据。据我所知，实现这一点的唯一方法是使用
fetch
请求查询页面的文本内容，然后使用RegEx或
indexOf（）
查找文本中的元素，正如我在回答中总结的那样。我同意解析器不需要空格信息。尽管如此，问题仍然是如何获得这些信息。我@PeeyushKushwaha我喜欢这篇文章，我同意这样一个原则：如果你试图解析整个页面，有更好的方法来解析。然而，对于您的用例，它要求您查找具有可变空白量的任意元素，本质上是，
indexOf（）
，或者什么都没有。除了检索HTML文件的全文内容并以某种方式在文本中找到要查找的元素之外，没有其他方法。使用DOMParser将其转换为DOM表示将删除空白，因此您唯一的选择是处理字符串内容。
var container = document.getElementById('container');
console.log(container.innerHTML);

<div id="contained" other-prop="some value">
</div>