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

我想使用DocumentFragment和querySelector來製作和修改DocumentFragments。我使用一些代碼從Inserting arbitrary HTML into a DocumentFragment創建從HTML字符串片段：DocumentFragment中不允許使用某些元素？

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的行爲都是相同的。

來源

2012-05-27 mikemaccana

'div'元素實際上不能包裝'html'或'body'元素，並且它不需要。這裏真的有問題嗎？ – Esailija

首先，爲什麼要''和''？ – Joseph

@Joseph目的是要執行服務器端的DOM構建。我只想先讓它在瀏覽器中工作。 – mikemaccana

文檔片段應該是文檔的一部分，而不是整個文檔 - 因此您不應該在文檔片段中使用<body>和<html>。文檔的要點在於它可以創建或存儲許多頂級元素（一些文檔）。插入到實際文檔中時，只插入內部元素，而不是頂級容器。

如果您想要一個具有HTML和正文部分的實際文檔，請創建一個文檔，而不是片段。

如果你只是想能夠使用選擇器操作，那麼你根本不需要使用fragement。只需創建一個div並在div上設置innerHTML並在div上使用querySelector操作即可。你不需要一個文件片段。

來源

2012-05-27 20:44:26 jfriend00

「如果您想要一個具有html和正文部分的實際文檔，請創建一個文檔，而不是片段。」 - 你能詳細說明一下嗎？什麼是創建內存文檔的最標準方式我可以使用QuerySelectorAll並以其他方式操作？我之前有一些JQuery可以做到這一點，但我想使用內置於瀏覽器中的內容。 – mikemaccana

@nailer我認爲[這個答案]（http://stackoverflow.com/a/9319353/575527）有你的問題的相關資源。 – Joseph

@nailer - 您不需要文檔片段就可以使用querySelector操作。只需創建一個div並將其分配給它，並在div上使用querySelector操作。根本不需要文檔片段。 – jfriend00

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

回答

相關問題