javascript - obtener - usando document.createDocumentFragment() y innerHTML para manipular un DOM
innerhtml que es (7)
Aunque DocumentFragment no admite innerHTML , <template> sí lo hace .
La propiedad de content de un elemento <template> es un DocumentFragment por lo que se comporta de la misma manera. Por ejemplo, puedes hacer:
var tpl = document.createElement(''template'');
tpl.innerHTML = ''<tr><td>Hello</td><td>world</td></tr>'';
document.querySelector(''table'').appendChild(tpl.content);
El ejemplo anterior es importante porque no podría hacer esto con innerHTML y, por ejemplo, un <div> , porque un <div> no permite elementos <tr> como elementos secundarios.
NOTA: Un DocumentFragment aún eliminará las etiquetas <head> y <body> , por lo que tampoco hará lo que quieras. Realmente necesitas crear un Document completamente nuevo.
Estoy creando un fragmento de documento de la siguiente manera:
var aWholeHTMLDocument = ''<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>'';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;
La variable aWholeHTMLDocument contiene una cadena larga que es el documento html completo de una página, y quiero insertarlo dentro de mi fragmento para generar y manipular el dominio de forma dinámica.
Mi pregunta es, una vez que haya agregado esa cadena a frag.innerHTML, ¿no debería cargar esta cadena y convertirla en un objeto DOM? Después de configurar innerHTML, ¿no debería tener acceso al DOM a través de una propiedad? Intenté frag.childNodes pero no parece contener nada, y todo lo que quiero es acceder al DOM creado recientemente.
Con un fragmento de documento, agregaría elementos que haya creado con document.createElement(''yourElement'') . aWholeHTMLDocument es simplemente texto. Además, a menos que esté utilizando marcos, no estoy seguro de por qué tendría que crear todo el documento HTML, simplemente use lo que está dentro de las etiquetas <body> .
No puede configurar el HTML interno de un fragmento de documento como lo haría con un nodo normal, ese es el problema. Agregar una división estándar y establecer el innerHTML de eso es la solución común.
Para un complemento de Firefox, probablemente tenga más sentido usar el método document.implementation.createHTMLDocument , y luego ir desde el DOM que te proporciona.
Sé que esta pregunta es antigua, pero me encontré con el mismo problema mientras jugaba con un fragmento de documento porque no me di cuenta de que tenía que agregarle una división y usar el innerHTML la innerHTML para cargar cadenas de HTML y obtener elementos DOM. de eso. Tengo otras respuestas sobre cómo hacer este tipo de cosas, más adecuadas para documentos completos .
En Firefox (23.0.1), parece que la configuración de la propiedad innerHTML del fragmento de documento no genera automáticamente los elementos. Solo después de agregar el fragmento al documento se crean los elementos.
Para crear un documento completo , use los métodos de implementación de document.implementation si son compatibles. He tenido éxito haciendo esto en Firefox, aunque no lo he probado en otros navegadores. Puede consultar HTMLParser.js en AtropaToolbox para ver un ejemplo del uso de los métodos de implementación de document.implementation . He utilizado este bit de script para las páginas XMLHttpRequest y manipularlas o extraer datos de ellas. Sin embargo, los scripts en la página no se ejecutan, que es lo que quería, aunque puede que no sea lo que usted quiere. La razón por la que opté por este método bastante detallado en lugar de tratar de usar el análisis disponible desde el objeto XMLHttpRequest directamente fue que tuve muchos problemas con los errores de análisis en ese momento y quería especificar que el documento debería analizarse como HTML 4 Transitional porque parece tener todo tipo de slop y producir un DOM.
También hay un DOMParser disponible que puede ser más fácil de usar. Hay una implementación de Eli Gray en la página en MDN para los navegadores que no tienen el DOMParser pero admiten document.implementation.createHTMLDocument . Las especificaciones para DOMParser especifican que los scripts en la página no se ejecutan y que el contenido de las etiquetas noscript se procesa.
Si realmente necesita tener habilitados los scripts en la página, puede crear un iFrame con altura 0, ancho 0, sin bordes, etc. Todavía estaría en la página pero podría ocultarlo bastante bien.
También existe la opción de usar window.open() con document.write , métodos DOM o lo que quieras. Algunos navegadores incluso te permiten hacer URI de datos ahora.
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);
Por lo tanto, tiene algunas opciones para crear documentos completos fuera de la pantalla / ocultos y manipularlos, todos los cuales permiten cargar el documento desde cadenas.
También hay phantomjs , un increíble proyecto que produce un navegador web sin scripts basado en webkit. Tendrás acceso al sistema de archivos local y podrás hacer prácticamente lo que quieras. Realmente no sé lo que estás tratando de lograr con tus scripts y manipulaciones de página completa.
Use appendChild
vea https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment
var fragment = document.createDocumentFragment();
... fragment.appendChild(some element);
document.querySelector(''blah'').appendChild(fragment);
Utilice querySelector () para obtener un elemento secundario del fragmento del documento (es probable que desee el cuerpo o algún elemento secundario del cuerpo). Entonces consiga el innerHTML.
document.body.innerHTML = aWholeHTMLDocument.querySelector("body").innerHTML
o
aWholeHTMLDocument.querySelector("body").childNodes;
Consulte https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment.querySelector