DocumentFragment 中不允许的某些元素？答案

【问题标题】：Certain elements not allowed in DocumentFragment?DocumentFragment 中不允许的某些元素？
【发布时间】：2012-05-27 20:28:53
【问题描述】：

我想使用 DocumentFragment 和 querySelector 来制作和修改 DocumentFragment。我正在使用Inserting arbitrary HTML into a DocumentFragment 中的一些代码从 HTML 字符串创建片段：

stringToDocumentFragment = function(html_string) {
    var frag = document.createDocumentFragment();
    var holder = document.createElement("div")
    holder.innerHTML = html_string
    frag.appendChild(holder)
    return frag
}

它有效：

test_one = stringToDocumentFragment('<one><two>test</two></one>')
#document-fragment

test_one.querySelector('one')
> <one>...</one>

但是，如果我使用 <html> 或 <body> 之类的元素，则会失败：

test_two = stringToDocumentFragment('<html><body>test</body></html>')
#document-fragment

test_two.querySelector('html')
null

Chrome 和 Firefox 中的行为是相同的。

【问题讨论】：

a div 元素确实不能包装 html 或 body 元素，它也不需要。这里真的有问题吗？
首先，为什么要创建<html> 和<body>？
@Joseph 目的是执行服务器端 DOM 构建。我只想让它先在浏览器中运行。

标签： javascript dom documentfragment queryselectall

【解决方案1】：

文档片段是文档的一部分，而不是整个文档 - 因此您不应该在文档片段中包含 <body> 和 <html>。文档片段的要点在于它有一种方法可以创建或存储许多顶级元素（某个文档的一部分）。插入实际文档时，只插入里面的元素，不插入顶级容器。

如果您想要一个包含 html 和正文部分的实际文档，请创建一个文档，而不是片段。

如果您只想能够使用选择器操作，那么您根本不需要使用片段。只需创建一个 div 并在 div 上设置 innerHTML 并在 div 上使用 querySelector 操作。你不需要一个文档片段。

【讨论】：

"如果您想要一个包含 html 和正文部分的实际文档，请创建一个文档，而不是片段。" - 你能详细说明吗？创建可以使用 QuerySelectorAll 并以其他方式操作的内存中文档的最标准方法是什么？我之前有一些 JQuery 来执行此操作，但我想使用浏览器内置的内容。
@nailer 我认为this answer 有与您的问题相关的资源。
@nailer - 您不需要文档片段就可以使用 querySelector 操作。只需创建一个 div 并将您的 HTML 分配给它并在 div 上使用 querySelector 操作。根本不需要文档片段。
@nailer - 你的最后一条评论被删除了。