.innerHTML失去格式

Question

我刚刚注意到浏览器忽略了HTML格式(例如对齐这个片段中的两个属性)：

 <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中设置了JavaScript，这都不重要。

在用户用JS编写元素时，可以查询对应于元素的页面源吗？有空白处什么的。我可以看到，当用户使用DOM操作修改元素时会出现问题，在这种情况下，如果

1. 原始用户格式保存在未被修改的所有内容中，或
2. 当用户在页面加载上编写原始源时，可以获得原始源，而无需修改DOM

一个片段，这样你就可以看到它的动作：

​

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代码时，您会给浏览器指示要呈现什么，而不是如何呈现它。加载页面时，浏览器将解释这些指令，并输出它认为需要的内容的呈现。

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

如果您习惯于将所有最佳实践抛出窗口，理论上您可以使用Fetch请求查询服务器上页面的HTML内容，然后将响应解析为明文。

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

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

同样重要的是，如果您试图处理的页面是客户端生成的SPA (单页应用程序)，则此解决方案将无法工作。如果您正在处理客户端SPA (例如，React、角、Vue等)，则可以反向工程呈现脚本以找到包含空格的元素的定义。不过，除此之外，你很可能运气不好。