Ответ 1
Вы не можете установить innerHTML фрагмента документа, как если бы вы сделали с обычным node, что проблема. Добавление стандартного div и установка innerHTML этого общего решения.
Используя 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
Я знаю, что этот вопрос старый, но я столкнулся с той же проблемой во время игры с фрагментом документа, потому что я не понимал, что мне нужно добавить div к нему и использовать div innerHTML для загрузки строк HTML и получить от него элементы DOM. У меня есть другие ответы о том, как это сделать, лучше подходит для целого документа.
В firefox (23.0.1) кажется, что установка свойства innerHTML фрагмента документа не генерирует автоматически элементы. Только после добавления фрагмента в документ создаются элементы.
Чтобы создать документ целое, используйте методы document.implementation, если они поддерживаются. У меня был успех в Firefox, но я не проверял его на других браузерах. Вы можете посмотреть HTMLParser.js в AtropaToolbox для примера использования методов document.implementation. Я использовал этот бит script для XMLHttpRequest страниц и манипулировал ими или извлекал из них данные. Скрипты на странице не выполняются, хотя это то, что я хотел, хотя это может быть не то, что вы хотите. Причина, по которой я пошел с этим довольно подробным методом вместо того, чтобы пытаться использовать синтаксический анализ, доступный непосредственно из объекта XMLHttpRequest, заключалась в том, что я столкнулся с довольно сложной ситуацией при анализе ошибок в то время, и я хотел указать, что документ должен быть анализируется как HTML 4 Transitional, потому что он, кажется, принимает все виды slop и создает DOM.
Существует также DOMParser, который может быть проще для вас использовать. Существует реализация Эли Грей на странице в MDN для браузеров, у которых нет 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. У вас будет доступ к локальной файловой системе и вы сможете делать все, что захотите. Я действительно не знаю, что вы пытаетесь выполнить с помощью полного скриптинга страниц и манипуляций.
Ответ 3
Для дополнения Firefox, вероятно, имеет смысл использовать метод document.implementation.createHTMLDocument, а затем перейти от DOM, который дает вы.
Ответ 4
С фрагментом документа вы добавите элементы, созданные с помощью document.createElement('yourElement'). aWholeHTMLDocument - это просто текст. Кроме того, если вы не используете фреймы, я не уверен, зачем вам нужно создавать весь HTML-документ, просто используйте то, что находится внутри тегов <body>.
Ответ 5
Использовать 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);
Ответ 6
Пока DocumentFragment не поддерживает innerHTML, <template> делает.
Свойством content элемента <template> является DocumentFragment, поэтому он ведет себя одинаково. Например, вы можете:
var tpl = document.createElement('template');
tpl.innerHTML = '<tr><td>Hello</td><td>world</td></tr>';
document.querySelector('table').appendChild(tpl.content);
Приведенный выше пример важен, потому что вы не могли сделать это с помощью innerHTML и, например, a <div>, так как a <div> не позволяет элементам <tr> как детям.
ПРИМЕЧАНИЕ. A DocumentFragment по-прежнему будет стирать теги <head> и <body>, поэтому он не будет делать то, что вы хотите. Вам действительно нужно создать совершенно новый Document.
Ответ 7
Используйте querySelector(), чтобы получить дочерний элемент фрагмента документа (вы, вероятно, хотите, чтобы тело или какой-либо дочерний элемент тела). Затем получите innerHTML.
document.body.innerHTML = aWholeHTMLDocument.querySelector("body").innerHTML
или
aWholeHTMLDocument.querySelector("body").childNodes;
См. https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment.querySelector