我想使用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 中的行为是相同的。
最佳答案
文档片段是文档的一部分，而不是整个文档 - 因此您不应该 <body>和<html>在文档片段中。文档片段的要点是有一种方法来创建或存储多个顶级元素(某个文档的一部分)。当插入到实际文档中时，仅插入其中的元素，而不插入顶级容器。
如果您想要一个包含 html 和正文部分的实际文档，请创建一个文档，而不是片段。
如果您只想能够使用选择器操作，那么您根本不需要使用fragment。只需创建一个div并在div上设置innerHTML并在div上使用querySelector操作即可。您不需要为此使用文档片段。
关于javascript - DocumentFragment 中不允许使用某些元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10777034/