sélection de noeuds et manipulation hors du dom (Quel est le truc de jQuery?)

Question

Salut, je voudrais faire dom la sélection et la manipulation hors de la dom.

Le but est de construire mon widget hors du dom et de l'insérer dans le dom seulement une fois qu'il est prêt.

Mon problème est que getElementById n'est pas pris en charge sur un fragment de document. J'ai aussi essayé createElement et cloneNode, mais ça ne marche pas non plus. J'essaye de faire cela en js simple. Je suis habitué à le faire avec jQuery qui le gère bien. J'ai essayé de trouver le truc dans la source jQuery, mais sans succès jusqu'à présent ...

Olivier

Answer 1

Je l'ai fait quelque chose de semblable, mais ne savez pas si elle répondra à vos besoins. Créez une "zone d'attente" telle qu'une plaine <span id="spanReserve"></span> ou <td id="cellReserve"></td>. Ensuite, vous pouvez faire quelque chose comme ça dans la fonction JS:

var holdingArea = document.getElementById('spanReserve'); holdingArea.innerHTML = widgetHTMLValue;

Answer 2

On dirait que vous faites des choses bonnes. Je ne sais pas pourquoi ça ne marche pas.

// if it is an existing element 
var node = document.getElementById("footer").cloneNode(true); 

// or if it is a new element use 
// document.createElement("div"); 

// Here you would do manipulation of the element, setAttribute, add children, etc. 
node.childNodes[1].childNodes[1].setAttribute("style", "color:#F00; font-size:128px"); 

document.documentElement.appendChild(node) 

Answer 3

EDIT:

Qu'en est-il quelque chose de simple le long de ces lignes:

DocumentFragment.prototype.getElementById = function(id) { 
    for(n in this.childNodes){ 
     if(id == n.id){ 
     return n; 
     } 
    } 

    return null; 
    } 

---

Pourquoi ne pas simplement utiliser jQuery ou l'API de sélection dans tout autre que vous êtes en utilisant lib? AFAIK toutes les bibliothèques majeures supportent la sélection sur des fragments. Si vous souhaitez ignorer une bibliothèque plus grande telle que jQ/Prototype/Dojo/etc., vous pouvez utiliser Sizzle, c'est-à-dire le moteur de sélection qui alimente jQ et Dojo et qui est proposé en mode autonome. Si c'est hors de question, alors je suppose que vous pourriez plonger dans la source Sizzle et voir ce qui se passe. Dans l'ensemble, il semble que beaucoup d'efforts pour éviter quelques 100k avec la probalité supplémentaire que le code que vous venez de créer sera plus lent que tout le travail tiré dans Sizzle ou une autre bibliothèque open source.

http://sizzlejs.com/

Oh aussi ... Je pense (deviner) truc de jQ est que les éléments ne sont pas hors du DOM. Je peux me tromper, mais je pense que quand vous faites quelque chose comme:

$('<div></div>'); 

est en fait dans le DOM documentent son tout simplement pas partie des nœuds corps/tête. Pourrait être totalement faux à ce sujet, c'est juste une supposition.

Alors vous m'avez curieux haha. J'ai jeté un oeil à Sizzle .. que la réponse est - il n'utilise pas les méthodes DOM. Il semble utiliser un algorithme qui compare les différentes propriétés DOMNode mappées aux types de sélecteurs - sauf si im manque quelque chose ... ce qui est tout à fait possible :-)

Cependant, comme indiqué ci-dessous dans les commentaires, il semble que Sizzle NE FONCTIONNE PAS sur DocumentFragments. ..Pour revenir à la case départ :-)

Answer 4

jQuery essayera d'abord d'utiliser getElementById, et si cela ne fonctionne pas, il recherchera ensuite tous les éléments DOM en utilisant getAttribute("id") jusqu'à ce qu'il trouve celui dont vous avez besoin.

Par exemple, si vous avez construit la structure DOM suivante qui est pas attaché à la document et il a été affecté au javascript var widget:

<div id="widget"> 
    <p><strong id="target">Hello</strong>, world!</p> 
</div> 

Vous pouvez ensuite effectuer les opérations suivantes:

var target; 

// Flatten all child elements in the div 
all_elements = widget.getElementsByTagName("*"); 

for(i=0; i < all_elements.length; i++){ 
    if(all_widget_elements[i].getAttribute("id") === "target"){ 
     target = all_widget_elements[i]; 
     break; 
    } 
} 

target.innerHTML = "Goodbye"; 

Si vous avez besoin de plus qu'une simple recherche par ID, je vous suggère d'installer Sizzle plutôt que de dupliquer la fonctionnalité Sizzle. En supposant que vous avez la possibilité d'installer une autre bibliothèque.

Espérons que cela aide!

Answer 5

Les navigateurs modernes (lire: pas IE) ont la méthode querySelector dans Element API. Vous pouvez l'utiliser pour obtenir et element by id dans un DocumentFragment.

jQuery utilise sizzle.js

Ce qu'il fait sur DocumentFragments est: profondément boucle à travers tous les éléments du fragment vérifier si l'attribut d'un élément (dans votre cas « id ») est celui que vous recherchez. À ma connaissance, sizzle.js utilise aussi querySelector, si disponible, pour accélérer les choses.

Si vous recherchez une compatibilité croisée, ce qui est probablement le cas, vous devrez écrire votre propre méthode ou vérifier la méthode querySelector.

Answer 6

Vous avez vraiment deux outils pour travailler, html() et en utilisant les opérateurs de manipulation jQuery normales sur un document XML, puis l'insérer dans le DOM.

Pour créer un widget, vous pouvez utiliser html():

$('#target').html('<div><span>arbitrarily complex JS</span><input type="text" /></div>'); 

Je suppose que ce n'est pas ce que vous voulez. Par conséquent, regardez les comportements supplémentaires du sélecteur jQuery: lorsque vous passez un second paramètre, il peut s'agir de son propre fragment XML, et une manipulation peut se produire sur ces documents. par exemple.

$('<div />').append('<span>').find('span').text('arbitrarily complex JS'). etc. 

Tous les opérateurs comme append, appendTo, emballage, etc. peuvent travailler sur des fragments comme celui-ci, et ils peuvent être insérés dans les DOM. Un mot d'avertissement, cependant: jQuery utilise les fonctions natives du navigateur pour manipuler ceci (autant que je sache), donc vous obtenez des comportements différents sur les différents navigateurs. Assurez-vous de bien formé XML. Je l'ai même fait rejeter des fragments HTML mal formés. Dans le pire des cas, cependant, revenez en arrière et utilisez la concaténation de chaînes et la méthode html().