Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/443.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 有没有办法将实际的DOM写入字符串_Javascript_Html_Dom - Fatal编程技术网

Javascript 有没有办法将实际的DOM写入字符串

Javascript 有没有办法将实际的DOM写入字符串,javascript,html,dom,Javascript,Html,Dom,我有一个html文档 <html> <head></head> <body> <form> <input type="text" value="" /> </form> <input type="button" id="doit" value="do it"/> <!-- jQuery --> <script type="text/javascript" src="http:

我有一个html文档

<html>
<head></head>
<body>
<form>
<input type="text" value="" />
</form>
<input type="button" id="doit" value="do it"/>
    <!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
        </script>            
        <script type="text/javascript">
        $(document).ready(function() {
            $("#doit").click(function(){
            var dom = document.documentElement.innerHTML;
            alert(dom);
            });
        });
        </script>
</body>
</html>

$(文档).ready(函数(){
$(“#doit”)。单击(函数(){
var dom=document.documentElement.innerHTML;
警报(dom);
});
});

如果编辑文本字段,其值仍然是警报中的原始空白值…为什么?如何在字符串中看到实际的DOM?

您需要使用当前值显式设置每个属性:

$(“#doit”)。单击(函数(){
$('*')。每个(函数(){
var$this=$(this);
对于(var i=0;i
它相当脏,我看不到将DOM输出到字符串背后的真正理由,但它似乎回答了您的问题

它脏的原因之一是
try
块是必需的,因为否则您将设置
input
type
属性,该属性是不可变的。我很确定这对其他特殊属性也不起作用,但是对于
输入的
,它可以正常工作


因此,我仍然想知道希望DOM作为字符串的原因是什么;可能有一个更优雅的解决方案。

我不知道您为什么要这样做,我能想到的唯一原因是某种所见即所得编辑器,用户可以与之交互,然后从中获取HTML源代码?如果是这样的话,我认为你不可能做到这一点

如果您只需要获取输入字段的值,而不是获取整个页面的HTML,那么您可以通过给输入一个ID来获取输入值:

<input type="text" value="" id="input_field" />
或者在jQuery中:

var value = $("#input_field").val();

或者,如果您希望能够在DOM被javascript更改时查看它,那么我建议您使用Firefox、用于/或的开发人员工具。在javascript或用户修改后,您可以通过这些工具查看保存在浏览器内存中的DOM。

什么是documentElement?@Jatin Dhoot:根元素<代码>警报(document.documentElement.innerHTML)
在FF&Chrome中适用于我。请解释一下为什么要这样做?@MatTheCat:是的,我很确定他希望能够看到DOM字符串中反映的“value”字段的更改。因此,如果他在输入中写“hello”,他希望看到value=“hello”。。不要认为这是可能的!您真的应该问这样一个问题:为什么要序列化整个HTML状态。@Raynos:因为OP的愿望是我的命令。嗯,我真的不明白原因。这只是回答问题的东西。你仍然应该警告OP他的愿望是愚蠢的/适得其反的;)作为web开发人员,我们的工作是警告他人。我正在尝试解决一个合理的问题。在玩弄这个的过程中,我只是想练习一些想法。使用我认为可能会分发一个可以在客户机上保存自己的表单。当表单有效且用户准备提交时,我可以使用本机post操作将数据发送到我们的站点。让用户在自己的机器上编辑自己的表单的原因是我们不想存储草稿表单。此外,我们知道他们都有浏览器,twFile方法占用的空间很小,很容易分发。因此,我不认为想要实现这一点是愚蠢的/适得其反的。当我保存一个json blob并对编辑字段进行jQuery.link操作时,将它写入文档可能同样容易,但这会使文档变得更丰富,我正在尝试尽可能地做最轻量级的事情。
var value = document.getElementById("input_field").value;
var value = $("#input_field").val();