.innerHTML 丢失 HTML 语法格式

Question

我刚刚注意到浏览器忽略了HTML格式（比如对齐这个sn-p中的两个属性）：

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

如果你跑了

var container = document.getElementById('container');
console.log(container.innerHTML);

你得到输出

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

在源代码中如何编写或直接在 JavaScript 中设置 .innerHTML 都没有关系。

是否可以像用户用JS写的一样查询一个元素对应的页面源？有空白和一切。当用户使用 DOM 操作修改元素时，我可以看到存在问题，在这种情况下，我仍然会很高兴

1. 保留原始用户格式以用于未修改的所有内容，或
2. 可以在用户在页面加载时编写原始源代码，而无需修改 DOM

一个 sn-p，以便您可以看到它的实际效果：

var container = document.getElementById('container');
console.log(container.innerHTML);

container.innerHTML = `  
  <div id="contained"
       other-prop="some value">
  </div>
`;

console.log(container.innerHTML);

container.children[0].setAttribute('modification', '');

console.log(container.innerHTML);

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

Answer 1

这根本不可能。 将代码视为计算机之间的消息，用于表达视觉表示，其中空格并不重要。

Answer 2

使用传统方法，不，这是不可能的。 HTML 在呈现页面时总是会丢弃多余的空白，不幸的是，没有办法禁用此功能。

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

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

如果您愿意放弃所有最佳实践，理论上您可以使用Fetch 请求向服务器查询您所在页面的 HTML 内容，然后将响应解析为纯文本。

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

如果您仍然真的想这样做，最好的选择是使用 RegEx 或 .indexOf() 在明文响应的中间找到您要查找的元素。不过，我真的想强调一下，这是非常糟糕的做法，不应该用于研究之外的任何事情。

还需要注意的是，如果您尝试处理的页面是客户端生成的 SPA（单页应用程序），那么此解决方案将不起作用。如果您正在处理客户端 SPA（例如，React、Angular、Vue 等），您可以对渲染脚本进行逆向工程以找到包含空格的元素的定义。然而，除此之外，你很可能不走运。