с использованием document.createDocumentFragment () и innerHTML для управления DOM
Я создаю фрагмент документа следующим образом:
var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;
Переменная aWholeHTMLDocument содержит длинную строку, которая представляет собой весь HTML-документ страницы, и я хочу вставить его в свой фрагмент, чтобы динамически сгенерировать dom и управлять им.
У меня вопрос: после добавления этой строки в frag.innerHTML не следует ли загружать эту строку и преобразовывать ее в объект DOM? Разве после установки innerHTML я не должен иметь доступ к DOM через свойство? Я попробовал frag.childNodes, но он, похоже, ничего не содержит, и все, что мне нужно, - это просто получить доступ к этой недавно созданной DOM.
2 ответа
Используйте appendChild
, см. https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment
var fragment = document.createDocumentFragment();
... fragment.appendChild(some element);
document.querySelector('blah').appendChild(fragment);
Я знаю, что этот вопрос старый, но я столкнулся с той же проблемой, играя с фрагментом документа, потому что я не понимал, что мне нужно добавить к нему div и использовать div innerHTML для загрузки строк HTML и получить элементы DOM от него. У меня есть другие ответы о том, как делать такие вещи, лучше подходящие для целых документов.
В Firefox (23.0.1) кажется, что установка свойства innerHTML фрагмента документа не генерирует автоматически элементы. Только после добавления фрагмента в документ элементы создаются.
Чтобы создать целый документ , используйте методы document.implementation , если они поддерживаются. Я добился успеха в этом в Firefox, хотя я не проверял его в других браузерах. Вы можете посмотреть HTMLParser.js в AtropaToolbox для примера использования методов document.implementation. Я использовал этот фрагмент скрипта для XMLHttpRequest страниц и манипулирования ими или извлечения данных из них. Скрипты на странице не выполняются, хотя это то, что я хотел, хотя это может быть не то, что вы хотите. Причина, по которой я выбрал этот довольно многословный метод вместо того, чтобы пытаться использовать синтаксический анализ, доступный непосредственно из объекта XMLHttpRequest, заключалась в том, что в то время я столкнулся с некоторыми проблемами с ошибками синтаксического анализа и хотел указать, что документ анализируется как HTML 4 Transitional, потому что кажется, что он принимает всевозможные помои и создает DOM.
Также доступно DOMParser , которое может быть проще в использовании. На странице MDN есть реализация Eli Grey для браузеров, которые не имеют DOMParser, но поддерживают document.implementation.createHTMLDocument. Спецификации для DOMParser указывают, что сценарии на странице не выполняются, а содержимое тегов noscript должно отображаться.
Если вам действительно нужны сценарии, включенные на странице, вы можете создать iFrame с 0 высотой, 0 шириной, без границ и т. Д. Он все равно будет на странице, но вы можете его довольно хорошо скрыть.
Существует также возможность использования window.open() с document.write, методами DOM или чем угодно. Некоторые браузеры теперь даже позволяют вам делать URI данных.
var x = window.open( 'data:text/html;base64,' + btoa('<h1>hi</h1>') );
// wait for the document to load. It only takes a few milliseconds
// but we'll wait for 5 seconds so you can watch the child window
// change.
setTimeout(function () {
console.log(x.document.documentElement.outerHTML);
x.console.log('this is the console in the child window');
x.document.body.innerHTML = 'oh wow';
}, 5000);
Итак, у вас есть несколько вариантов создания целых документов вне экрана / скрытых и манипулирования ими, все из которых поддерживают загрузку документа из строк.
Также существует phantomjs , потрясающий проект, создающий веб-браузер без скриптов на основе скриптов на основе webkit. Вы получите доступ к локальной файловой системе и сможете делать практически все, что захотите. Я действительно не знаю, чего вы пытаетесь достичь с помощью сценариев и манипуляций на всей странице.