如何通过 JS 获取网站实际的 HTML 代码？答案

【问题标题】：How to get websites actual HTML code by JS?如何通过 JS 获取网站实际的 HTML 代码？
【发布时间】：2012-07-24 13:44:54
【问题描述】：

我有一个带有表单的网站。表单由用户填写数据，例如我向用户显示：

 <input type='text' value="" name="dsa" />

他用“3”的值填充它；

然后他点击“保存”按钮。现在我想拥有网站的整个 HTML，包括字段的值。所以我使用：

document.documentElement.innerHTML

但我明白了：

 <input type='text' value="" name="dsa" />

但我想得到这个：

 <input type='text' value="3" name="dsa" />

注意我想获取网站的整个 HTML，而不仅仅是一个字段。我不知道网站上会有哪些字段，所以我需要一个通用的解决方案。

【问题讨论】：

你能解释一下你想要完成什么吗？
reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags 的可能重复项
@asawyer 好吧.. 我不知道你想让我解释什么。请解释在这个问题中无法理解的内容。
我相信 epascarello 的答案（链接）正是您想要的。
+Lefteris 部分是这样。但只是部分。关于输入标签的问题，我问的是所有表单标签（输入，选择等）......

标签： javascript html dom

【解决方案1】：

AFAIK 你不能从 HTML 代码中得到这个，因为当用户在输入文本字段中输入内容时 HTML 代码不会改变。

您可以做的是获取页面上的所有输入字段并通过以下方式获取它们的值：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

代码来自这篇文章：https://stackoverflow.com/a/2214077/312312 我懒得把它写下来：P

【讨论】：

我不想获取字段的值。正如我所写的，我想用这些值来获取整个 HTML。有什么想法吗？
您为什么要这样做？你不能，如果你填写字段，HTML 不会改变。
如果页面只有输入文本字段，请按原样抓取 HTML（没有输入的值），使用我提供的代码抓取值并在抓取的 HTML 代码中替换 value="" with value="X" 其中 X 是你从上面的代码中得到的值
+Onheiron 因为我希望整个 HTML 都带有值。嗯......我仍然认为这是可能的。
+Lefteris 对我来说看起来是一个不错的方向，但它仍然不是完整的解决方案。选择和其他表单字段呢？

【解决方案2】：

在 jQuery 中我会这样做

$(function() {
    $('input').keyup(function() {
       $(this).attr('value', $(this).val());
    }); 

});

因为key up后没有设置value属性

【讨论】：

我正要发布这个。这是一个 jsfiddle：jsfiddle.net/cpbX6 我使用 .change() 而不是 .keyup()
@tomaszs 开始做吧。注意到你想用 javascript 做 jQuery 做不到的事情。
然后手动将事件处理程序绑定到字段并构建一个包装器来操作来自 input.attributes 的值：P
我的问题是关于 JavaScript 的。请看标题和标签。
@tomaszs 这是一个没有 jQuery 的版本：jsfiddle.net/cpbX6/3 浏览器兼容性取决于您。如果您需要处理更多表单标签，您还必须手动添加它们 - 可以使用相同的基本过程。

【解决方案3】：

您可以尝试在整个文档上设置实时事件，将属性设置为带有用户设置值的 html 或在您的提交中设置它们。

例如第一种方式

$("body").on("change", "select,input,textarea", function(){
  $(this).attr("value", $(this).val());
});

但这不应该盲目地这样做，你会遇到重置问题。而且你应该解决选定的单选、复选框和其他属性的问题，而不仅仅是值。

第二种方法是在真正需要时序列化整个页面。

var serialize = function(el){
   $("select, input, textarea").each(function(){
     $(this).attr("value", $(this).val()); //the same way as upper
   });
}
$(".serialize").click(function(){
  var inner = $("body"),
      html;
  serialize(inner);
  html = inner.html(); //here you will get whole html with setted attributes
});

这种方式似乎更好，因为不会有不必要的事件委托。

http://jsfiddle.net/CeAXL/2/ - 测试示例。

但是在这两种方式中，为 DOM 本身设置永久值并不是一个好主意。

【讨论】：

很好，但我需要一个 JavaScript 解决方案。不使用 JQUERY 库。