文档片段中不允许的某些元素

Certain elements not allowed in DocumentFragment?

本文关键字：元素 不允许 片段 文档      更新时间：2023-09-26

我想使用 DocumentFragment 和 querySelector 来制作和修改 DocumentFragments。我正在使用将任意 HTML 插入文档片段中的一些代码从 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 和正文部分的实际文档，请创建一个文档，而不是片段。

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

相关文章：