Question

我想使用DocumentFragment和querySelector来制作和修改DocumentFragments。我正在使用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中的行为相同。

Answer 1

文档片段是文档的一部分，而不是整个文档 - 因此您不应在文档片段中包含<body>和<html>。文档的重点是它有一种方法来创建或存储一些顶级元素（一些文档的一部分）。插入实际文档时，只插入内部元素，而不是顶级容器。

如果你想要一个包含html和body部分的实际文档，那么创建一个文档，而不是一个片段。

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

DocumentFragment中不允许使用某些元素？

1 个答案: