1

我想使用 DocumentFragment 和 querySelector 来制作和修改 DocumentFragments。我正在使用将任意 HTML 插入 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>or之类的元素<body>，它会失败：

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

test_two.querySelector('html')
null

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

4

1 回答 1

2

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

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

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

于 2012-05-27T20:44:26.223 回答