如何获取与当前 DOM 树对应的 HTML？答案

【问题标题】：How do I get HTML corresponding to current DOM tree?如何获取与当前 DOM 树对应的 HTML？
【发布时间】：2011-01-08 08:51:54
【问题描述】：

jQuery("html").html() 似乎可以检索到大部分内容，但包装标签除外。

DOM 被大量修改，因此原始来源没有太大用处。

可靠吗？
只获取 jQuery 的输出并环绕它是一个好主意吗？我可以在这里看到至少一些 doctype 问题，并且包含不应重新运行的脚本。
有更好的方法吗？

编辑：jQuery("").append(jQuery("html").clone()).html() 几乎可以工作，除了 doctype。有没有简单的方法来获得它？

编辑 2：我主要需要 doctype 来获得正确的 quirk/almoststandards/standards 模式。 document.compatMode 有一半，够吗？

【问题讨论】：

如果我们知道您试图用 HTML 做什么，这可能会有所帮助。
参见stackoverflow.com/questions/1526407/… 或stackoverflow.com/questions/1917020/… 或stackoverflow.com/questions/1917040/… 或（较少特定于jquery）stackoverflow.com/questions/1763479/…

标签： javascript jquery dom

【解决方案1】：

你试过$(document).html()

【讨论】：

【解决方案2】：

http://brandonaaron.net/blog/2007/06/17/jquery-snippets-outerhtml/ jQuery的outerHTML实现。

编辑

在 document.doctype 选项中进行快速搜索，here is a full reference 给它。删除了旧的和现在不必要的文本/代码。

【讨论】：

请求源代码不会有什么好处，因为 DOM 被修改了，这是我感兴趣的修改状态。

【解决方案3】：

jQuery 使用innerHTML 来获取 HTML。您不会使用此属性获得确切的 DOM 状态。例如input 值的内容或select 框的状态将不会保持不变，除非您在调用innerHTML 之前对其进行适当修改。

你说的这个wrapping标签是什么？对于大多数情况，innerHTML 应该可以正常工作。

例如，我将此代码用于select 和input 框的状态。

// it's defaultValue so we can use innerHTML
$("#divContentInside input").each(function () {
    this.defaultValue = this.value;
});
// go through each select and replace
// it's selection so we can use innerHTML
$("#divContentInside select > option").each(function () {
    if (this.selected) {
        this.setAttribute("selected", true);
    } else {
        this.removeAttribute("selected");
    }
});

我没有发现其他元素的状态一致性问题，但可能有。

【讨论】：

【解决方案4】：

您可以使用标准的 DOM 命令：

获取HTML标签的innerHTML

document.body.parentNode.innerHTML

获取Doctype信息

document.body.parentNode.previousSibling;

【讨论】：

谢谢，天真 $('
').append($(document.body.parentNode.previousSibling) ).html() 引发“无法在指定点插入节点层次结构”异常，但我应该能够从节点中找出文档类型。
可以读取document.body.parentNode.previousSibling返回的对象的属性，它没有html