如何通过 JavaScript 获取静态的原始 HTML 源代码？

Question

在开发工具时（鉴于我能够开发以下MCVE 的问题，我认为此处不重要的细节），我注意到，至少在 Chrome 和 Firefox 版本中在我的桌面上，我从innerHTML 属性获得的字符串不等于我在 HTML 文件上静态编写的原始源代码。

console.log(document.querySelector("div").innerHTML);
/*
  <table>
    <tbody><tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody></table>
*/

<div>
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </table>
</div>

您可能已经注意到，出现了一个自发的<tbody> 标签（我没有将它添加到我的 HTML 源代码中！），显然是由于页面之间的预处理时间下载 和页面onload 事件。在这种特殊情况下，出于我的应用目的，此修改不会产生错误，因此可以忽略。

事实证明，在某些情况下，这种更改可能是灾难性的，特别是当 all 标记被删除时，如下例所示。

console.log(document.querySelector("div").innerHTML);
/*
  Hello
  World
*/

<div>
  <td>Hello</td>
  <td>World</td>
</div>

显然，在这种情况下，原始标记存在 问题，但在我的应用程序中，“误用”（如 <div> 中的 <td>）被接受。 不接受的是 innerHTML 根本没有 HTML 标记，这导致了主要问题：我怎样才能获得 @987654332 的原始静态编码 HTML 标记@元素？

另外，如果可能的话，也很高兴知道为什么以及如何发生这种现象，因为我很好奇 :D

Answer 1

浏览器下载 HTML 源代码并将其解析为 DOM（文档对象模型）。任何问题都尽可能好地修复，源代码中可以省略的元素可能会添加到 DOM 中。

从那一刻起，这个内存结构就被用来渲染页面，这就是你在 JavaScript 中所指的结构。所以如果你请求一个元素的 innerHTML，你只会得到一段基于 DOM 渲染的 HTML 源代码。原始源代码在 JavaScript 中根本不可用。

所以，这就是它发生的原因。而且你也无能为力。我认为唯一的解决方法是使用 AJAX 将整个页面重新加载到一个字符串中，然后自己获取所需的源代码。

但显然，更好的解决方案是删除那些“误用”并使您的 HTML 源代码有效。如果您只需要在页面中包含一些信息以供 JavaScript 单独使用，您可以选择嵌入一个 script 标记，该标记使用这些值初始化几个变量，而不是生成一些无效的 HTML。

Answer 2

我以前在工作中尝试过这样做。在我的一些解决方案中，我构建了一个表格，表格行围绕我想要使用的表格数据元素，以便我可以使用表格数据。如果您想在 javascript 方面进行更多处理，您可能会执行以下操作：

<div>
    <div class="td">Hello</div>
    <div class="td">World</div>
</div>

然后您可以使用 javascript 处理这个，将 div.td 转换为实际的 td。只是一个想法。