Некоторые элементы не разрешены в DocumentFragment?

Я хотел бы использовать 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> или же <body>не получается:

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

test_two.querySelector('html')
null

Поведение идентично как в Chrome, так и в Firefox.

Источник

1 ответ

Решение

Фрагмент документа предназначен для того, чтобы быть частью документа, а не целым документом - поэтому вы не должны иметь <body> а также <html> во фрагменте документа. Точка фрагмента документа - это способ создать или сохранить несколько элементов верхнего уровня (часть некоторого документа). При вставке в фактический документ вставляются только элементы внутри, а не контейнер верхнего уровня.

Если вам нужен реальный документ с частями html и body, то создайте документ, а не фрагмент.

Если вы просто хотите использовать селекторные операции, вам не нужно вообще использовать fragement. Просто создайте div и установите innerHTML на div и используйте операции querySelector на div. Вам не нужен фрагмент документа для этого.

Источник
Другие вопросы по тегам