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

Posted 2023-02-21

【中文标题】如何通过 JavaScript 获取静态的原始 HTML 源代码？

【英文标题】：How to get the static, original HTML source via JavaScript?

【发布时间】：2015-01-25 06:22:29

【问题描述】：

在开发工具时（鉴于我能够开发以下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

【问题讨论】：

你可能想看看这里，虽然它可能不是你问题的答案：***.com/questions/938083/…

链接是相关的，但仍然不能解决我的问题......无论如何，这是信息丰富的 :D 谢谢！

试图将td 误用为div 的子代not 起作用。您无法设置 td 元素的样式或在脚本中访问它们，仅仅是因为它们不存在 - <td> 和 </td> 标记将被忽略。

你问了一个有效的问题，但我想知道你是否有一个有效的用例，这实际上可能会导致代码出现问题。当您这样做时，我希望修复将是简单而明显的——但是尝试使用灵活的语法原型工具预测所有可能的问题既不简单也不明显，而且可能会浪费大量时间。正如 Jukka 指出的那样，您的第二个示例并不完全是一个有效的用例。

是的......你们都说得对，它在原版 HTML 中无效。但是我的工具所做的实际上是填补了由于缺少<table> 和<tr> 标记而留下的空白，在本例中，通过在运行时插入那些<td> 以试图降低标记的复杂性。它是页面原型设计的内部解决方案，实际上它已经运行得非常好，但我想通过消除这个障碍来改进它。

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的回复！嗯，我完全同意你的看法，但是我选择省略的背景信息使事情变得更复杂：这是一个内部（仅限工作场所）工具，可以更快地进行 HTML 原型设计。这个想法是允许第二种可能的语法，比 HTML 的默认语法更灵活，来标记页面上的元素。这听起来很愚蠢，但进展顺利（我已经用这个工具构建了 10 多个页面原型），直到我被这个障碍卡住了。还有一件事：它是离线运行的，所以不幸的是，没有 AJAX 可以工作：/

您可以在服务器端进行自己的预渲染，因此发送到浏览器的 HTML 实际上是有效的。可以将其视为论坛上的 [bbcode] 之类的标记语言，甚至可以在 *** 上使用反引号和星号将文本标记为代码或使其变为粗体或斜体。同样，您可以在服务器上更正实际的 HTML，或将您自己的幻想标签扩展为实际的 HTML。只要您向浏览器发送有效的 HTML，因为浏览器并没有那么宽容，并且会删除/忽略它不理解的所有内容。

嗯...这实际上是鼓舞人心的。作为我最初问题的替代解决方案，我几乎可以按照您所说的那样做，只是在客户端，仍然：只要需要 HTML 内容，就拥有 BB 代码。例如，在[div] 中提供[td]（就浏览器而言，这意味着什么都没有，只是简单的文本）。然后，JavaScript 可以将类似 BB 的代码转换为 HTML，填补中间省略的必要空白）：D 谢谢！如果几天后有任何其他更简单的解决方案出现，您将被选中:)

“原始的 [HTML] 源代码在 JavaScript 中根本不可用”不太正确。您可以访问 一些 的原始 HTML，但只能访问属性。 javascript.info/dom-attributes-and-properties#html-attributes

【参考方案2】：

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

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

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

【讨论】：

这行得通，也:) 感谢您的回答！我能想到的唯一问题是需要更重的语法，什么样的会破坏我的工具的目的，它应该使用带有自定义“元素”的非常轻巧、简单的“方言”（实际上，只是有很多模板内的常规 HTML 元素）。