有没有办法在对页面执行 AJAX 操作后验证页面的 HTML？答案

【问题标题】：Is there a way to validate the HTML of a page after AJAX operations are performed on it?有没有办法在对页面执行 AJAX 操作后验证页面的 HTML？
【发布时间】：2011-04-17 19:53:45
【问题描述】：

我正在编写一个 Web 应用程序，它使用 JQuery 通过 AJAX 插入和修改 HTML 元素。它工作得很好，但我想确保引擎盖下一切正常。当我在 IE 或 Chrome 中检查页面的来源时，它会显示原始文档标记，而不是自 AJAX 调用以来发生的变化。

我喜欢使用 WC3 验证器来检查我的标记，因为它偶尔会提醒我忘记关闭标签等。在从服务器提供的原始源之后，我如何使用它来检查我的页面的标记有已通过 Javascript 更改？

谢谢。

【问题讨论】：

标签： javascript html ajax validation dom

【解决方案1】：

在 chrome 中使用开发者工具来探索 DOM：它会显示你在 javascript 中添加的所有 HTML。

您现在可以将其复制并粘贴到您想要的任何验证器中。

或者不是在 JQuery 中插入代码，而是将其提供给控制台，浏览器将无法为您关闭标签。

console.log(myHTML)

【讨论】：

如果你更喜欢火狐，你可以用 Firebug 做同样的事情
我已经尝试过了，如果我弄错了，请纠正我，但 Chrome 似乎可以自动修复丢失标签等问题？是否可以复制标记，而不是 Chrome 对它的解释？
好吧，我认为每个浏览器都会为您解决问题，我不知道您是否可以停用它...
@Robby Slaughter：当然！由于 OP 说的是 IE/Chrome，所以我没有提到 Firebug。
@Loïc Février 您不能禁用浏览器的“为您解决问题”，因为它是 HTML 解析器的固有部分。（它必须以某种方式解释标记流，以便构建构成 DOM 的对象树。这只是当它遇到模棱两可的情况时它做出什么假设的问题。）

【解决方案2】：

如果您只关心格式正确（缺少结束标签等），您可能只想检查 AJAX 插入的块的结构。（一旦它成为 DOM 的一部分，它就会形成良好的格式……只是不一定是您想要的结构。）最简单的方法可能是尝试使用 XML 库对其进行解析。（如果您不使用 XHTML，则可以将其设为严格的 HTML 模式）

实际验证（测试浏览器通常不太关心的“您不能将标签 X 放入标签 Y”规则）要复杂得多，并且取决于您愿意付出多少努力它，可能不值得麻烦。（因为，如果你单独验证它们，你会得到很多“这只是一个片段”的误报）

无论您决定使用哪个，如果您想要一个可靠的测试结果，您需要在浏览器解析它们之前获取 AJAX 响应。（虽然它们仍然只是一串文本而不是 DOM 树）

【讨论】：

【解决方案3】：

前面的两个答案都很好地说明了浏览器将“修复”您插入 DOM 的某些 html 的事实。

回到您的问题，您可以将以下内容添加到浏览器的书签中。它会将 DOM 的内容写入新窗口，复制并粘贴到验证器中。

javascript:window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);

【讨论】：