如何通过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事件之间进行了一段时间的预处理.在这种特殊情况下,出于我的应用目的,这种修改不会产生错误,因此可以忽略.

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

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

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

显然,在这种情况下,原始标记存在问题,但在我的应用程序中,"误用"(如<td>内部a <div>)被接受.什么是不能接受的是innerHTML被留下没有HTML标记在所有的,这导致了主要问题:我如何能得到的原始,静态编码的HTML标记<div>元素？

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

Answer 1

浏览器下载HTML源并将其解析为DOM(文档对象模型).任何问题都尽可能地修复,并且可以在DOM中添加源中可以省略的元素.

从那一刻开始,这个内存结构用于呈现页面,这就是你在JavaScript中引用的结构.因此,如果您请求元素的innerHTML,您只需获得一段基于DOM呈现的HTML源代码.JavaScript中根本不提供原始源代码.

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

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