Question

我有一个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>

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

Answer 1

您需要使用当前值明确设置每个属性：http://jsfiddle.net/GW8eU/。

$("#doit").click(function(){
    $('*').each(function() {
        var $this = $(this);
        for(var i = 0; i < this.attributes.length; i++) {
            try {
                var t = this.attributes[i];
                $this.attr(t.name, $this.prop(t.name));
            } catch(e) {}
        };
    });
    var dom = document.documentElement.innerHTML;
    alert(dom);
});

它相当脏，我没有看到将DOM输出到字符串背后的真正原理，但它似乎回答了你的问题。

它很脏的一个原因是try块是必不可少的，因为否则你将设置type的{{1}}属性是不可变的。我很确定这也不适用于其他特殊属性，但对于input的{{1}}，它可以正常工作。

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

Answer 2

我不知道你为什么要这样做，我能想到的唯一原因是用户与之交互的某种WYSIWYG编辑器，然后可以从中获取HTML源代码？如果是这种情况，那么我认为你无法实现这一目标。

如果您只需要获取输入字段的值，而不是将整个页面设为HTML，则可以通过为输入提供ID来获取输入值：

<input type="text" value="" id="input_field" />

并使用：

var value = document.getElementById("input_field").value;

或者在jQuery中：

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

或者，如果您希望能够通过javascript更改DOM，那么我建议使用Firebug for Firefox，开发者工具Chrome / Safari或{{ 3}}。这些将允许您在javascript或用户修改后查看浏览器内存中的DOM。

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

2 个答案: