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

发布于 2024-11-26 02:20:19 字数 732 浏览 1 评论 0原文

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

原文

I have an html document

<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>

if I edit the text field its value is still the original blank value in the alert...WHY? and how do I see the actual DOM in a string?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吐个泡泡 2024-12-03 02:20:19

您需要使用当前值显式设置每个属性： 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 块是必不可少的，因为否则您将设置 input 的 type 属性，该属性是不可变的。我非常确定这也不适用于其他特殊属性，但对于 input 的 value 来说它工作得很好。

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

You'd need to set each attribute explicitly with the current value: 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);
});

It's rather dirty and I do not see a real rationale behind outputting the DOM to a string, but it seems to answer your question.

One of the reasons it's dirty is that the try block is essential, because otherwise you'd be setting the type attribute of an input which is immutable. I'm pretty certain this won't work with other special attributes either, but for the value of an input it works fine.

Therefore I would still like to know what's the reason behind wanting the DOM as a string; probably there is a more elegant solution.

回复收藏 0 原文

不必你懂 2024-12-03 02:20:19

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

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

<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、Developer Tools for Chrome/Safari 或开发人员IE 工具栏。这些将让您查看 DOM 在 JavaScript 或用户修改后保存在浏览器内存中的样子。

I don't know why you want to do this, the only reason I can think of is some kind of WYSIWYG editor that a user interacts with and then can get the HTML source from that? If that is the case then I don't think you are going to be able to achieve this.

If all you need is to get the value of the input field then rather than getting the whole pages HTML, you can get the value of the input by giving your input an ID:

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

and using:

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

Or in jQuery:

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

Alternatively, if you want to be able to view the DOM as it is changed by javascript then I recommend Firebug for Firefox, Developer Tools for Chrome/Safari or the Developer Toolbar for IE. These will let you view the DOM as it is held in the browsers memory after modifications by javascript or the user.

回复收藏 0 原文

~没有更多了~