à l'aide de document.createDocumentFragment() et innerHTML à manipuler le DOM

Je suis de la création d'un fragment de document comme suit:

var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>hello world</h1></body></html>';
var frag = document.createDocumentFragment();
frag.innerHTML = aWholeHTMLDocument;

La variable aWholeHTMLDocument contient une longue chaîne qui est l'ensemble du document html d'une page, et je veux l'insérer à l'intérieur de mon fragment afin de générer et de manipuler le dom de manière dynamique.

Ma question est, une fois que j'ai ajouté que la chaîne de fragger.innerHTML, ne devrait-elle pas de charge de cette chaîne et de les convertir en un objet DOM? Après le réglage de innerHTML, ne devrais-je pas avoir accès au DOM par le biais d'une propriété? J'ai essayé de frag.childNodes mais il ne semble pas contenir quoi que ce soit, et tout ce que je veux, c'est juste l'accès nouvellement créé DOM.

  • Je ne suis pas sûr que c'est possible pour le "innerHTML" de tout élément du DOM (et un fragment de document est vraiment juste un élément du DOM qui ne peuvent pas faire partie de la DOM) pour être complet d'un document HTML. La réponse à votre question serait "oui" si c'était possible.
  • Au lieu de .appendChild(frag) que vous faites .innerHTML une fois pour toutes. Il est plus rapide que de créer un fragment de document, parce que la manipulation des chaînes est plus rapide.
  • La preuve: jsperf.com/fragments-vs-html-strings
InformationsquelleAutor Loic Duros | 2011-11-20
  1. 25

    Vous ne peut pas définir le innerHTML d'un fragment de document comme vous le feriez avec un noeud normal, c'est ça le problème. L'ajout d'un standard div et le réglage de la innerHTML est la solution commune.

    • Donc, ce que vous dites, c'est que je dois faire la suite? var aWholeHTMLDocument = '<!doctype html> <html><head></head><body><h1>bonjour</h1></body></html>'; var div = document.createElement('div'); div.innerHTML = aWholeHTMLDocument; Cette bande de tout, sauf de la <h1> bien que...
    • Il n'a jamais dit quelque chose comme cela ... Il vient de l'expliquer votre erreur. Votre solution suggérée dans votre commentaire n'est absolument pas recommandé.
    InformationsquelleAutor Johan
  2. 21

    Tout DocumentFragment ne prend pas en charge innerHTML, <template> ne.

    La content propriété d'un <template> élément est un DocumentFragment de sorte qu'il se comporte de la même manière. Par exemple, vous pouvez faire:

    var tpl = document.createElement('template');
tpl.innerHTML = '<tr><td>Hello</td><td>world</td></tr>';
document.querySelector('table').appendChild(tpl.content);

    L'exemple ci-dessus est important parce que vous ne pouvez pas faire cela avec innerHTML et par exemple un <div>, car un <div> ne permet pas <tr> éléments, comme des enfants.

    REMARQUE: UN DocumentFragment est toujours supprimer la <head> et <body> balises, afin de ne pas faire ce que vous voulez. Vous avez vraiment besoin de créer une toute nouvelle Document.

    InformationsquelleAutor chowey
  3. 5

    Je sais que cette question est vieux, mais j'ai rencontré le même problème lors de la lecture avec un fragment de document parce que je ne savais pas que je devais ajouter un div et utiliser les div à l' innerHTML à la charge des chaînes de HTML et d'obtenir des Éléments du DOM à partir d'elle. J'ai d'autres réponses sur la façon de faire ce genre de chose, mieux adapté pour les ensemble documents.

    Dans firefox 23.0.1), il apparaît que la définition de la propriété innerHTML de l'fragment de document n'est pas de générer automatiquement les éléments. C'est seulement après l'ajout du fragment de document que les éléments sont créés.

    Pour créer un ensemble document, utilisez le document.la mise en œuvre méthodes, si elles sont prises en charge. J'ai eu du succès en faisant cela, sur Firefox, je n'ai pas vraiment testé sur d'autres navigateurs bien. Vous pouvez regarder HTMLParser.js dans le AtropaToolbox pour un exemple d'utilisation de document.implementation méthodes. J'ai utilisé ce morceau de script pour XMLHttpRequest pages et de les manipuler ou d'extraire des données à partir d'eux. Les Scripts de la page ne sont pas exécutées si, ce qui est ce que je voulais si elle peut ne pas être ce que vous voulez. La raison pour laquelle je suis allé avec ce assez bavard méthode au lieu d'essayer d'utiliser l'analyse de la disposition de la XMLHttpRequest objet directement est que j'ai couru en assez un peu de mal avec l'analyse des erreurs à l'époque et je voulais préciser que le doc doit être interprété comme du HTML 4 Transitoire, car il semble à prendre toutes sortes de décantation et de produire un DOM.

    Il y a aussi un DOMParser disponible qui peut être plus facile pour vous d'utiliser. Il y a une mise en œuvre par Eli Gris sur la page au MDN pour les navigateurs qui n'ont pas le DOMParser de soutien mais ne document.implementation.createHTMLDocument. Les spécifications pour DOMParser préciser que les scripts de la page ne sont pas exécutées et le contenu des balises noscript être rendus.

    Si vous avez vraiment besoin de scripts activés dans la page, vous pouvez créer une iFrame avec 0 hauteur, 0 largeur, pas de frontières, etc. Il serait encore dans la page, mais vous pouvez le cacher assez bien.

    Il y a aussi l'option d'utiliser window.open() avec document.write, les méthodes du DOM ou ce que vous voulez. Certains navigateurs vous permettent même de faire des données d'URI maintenant.

    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);

    Donc, vous avez quelques options pour la création de ensemble documents à l'écran/cachés et de les manipuler, qui prennent toutes en charge du chargement du document à partir de chaînes.

    Il y a aussi phantomjs, un impressionnant projet de produire une tête scriptable navigateur web basé sur webkit. Vous aurez accès au système de fichiers local et être en mesure de faire à peu près tout ce que vous voulez. Je ne sais pas vraiment ce que vous voulez accomplir avec votre pleine page de script et de la manipulation.

    InformationsquelleAutor Kastor
  4. 3

    DocumentFragment hérite de Node, mais pas de Élément qui contient le .innerHTML propriété.

    Dans votre cas, je voudrais utiliser le <template> tag. Dans hérite de Element et il a une chouette HTMLTemplateElement.content propriété qui vous donne un DocumentFragment.

    Ici est un simple helpermethod, vous pouvez utiliser:

    export default function StringToFragment(string) {
    var renderer = document.createElement('template');
    renderer.innerHTML = string;
    return renderer.content;
}
    InformationsquelleAutor pekaaw
  5. 2

    Pour un add-on Firefox, il a probablement fait plus de sens pour utiliser le document.la mise en œuvre.createHTMLDocument méthode, puis aller dans le DOM qui vous donne.

    InformationsquelleAutor Gijs
  6. 1

    Avec un fragment de document vous ajouter des éléments que vous avez créé avec document.createElement('yourElement'). aWholeHTMLDocument est simplement du texte. Aussi, à moins que votre utilisation des cadres, je ne suis pas sûr de savoir pourquoi vous avez besoin pour créer l'ensemble du document HTML juste à utiliser ce qui est à l'intérieur de la <body> balises.

    • C'est pour un add-on Firefox. Je suis en plaçant aWholeHTMLDocument dans une iFrame, mais j'ai besoin d'elle son ensemble, pas seulement le <body> balises, le <head> tag contient aussi des trucs d'intérêt, et je veux garder l'ensemble DOM intacte.
    • alors ce que vous voulez est d'obtenir une référence à la iframe et de l'ensemble de innerHTML pour aWholeHTMLDocument
    InformationsquelleAutor qw3n
  7. 0

    Utilisation appendChild

    voir https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

    var fragment = document.createDocumentFragment();
... fragment.appendChild(some element);
document.querySelector('blah').appendChild(fragment);
    • Ce n'aborde le "processus" chaîne de problème.
    InformationsquelleAutor Tony Jin
  8. -1

    Utilisation querySelector() pour obtenir un enfant du fragment de document (vous voulez probablement que le corps, ou un enfant de l'organisme). Puis obtenir le innerHTML.

    document.body.innerHTML = aWholeHTMLDocument.querySelector("body").innerHTML

    ou

    aWholeHTMLDocument.querySelector("body").childNodes;

    Voir https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment.querySelector

    InformationsquelleAutor Phyxx