javascript - 如何通过 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 源代码中!)出来了，显然是由于在页面下载和页面加载事件<之间进行了预处理/em>。在这种特殊情况下，出于我的应用目的，此修改不会产生错误，因此可以忽略。

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

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

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

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

此外，如果可能的话，也很高兴知道这种现象发生的原因和方式，因为我很好奇:D

Answer 1

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

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

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

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