Share
Il existe plusieurs types de nœuds DOM. Il y a Document, Élément, Texte et beaucoup d’autres, qui mettent également en œuvre la Nœud. L’un des plus intéressants, mais jusqu’à présent peu utilisés, est le DocumentFragment nœud. C'est fondamentalement un conteneur spécial pour les nœuds.
UNE DocumentFragment Le noeud est traité spécialement dans de nombreux algorithmes DOM. Dans cet article, nous verrons certaines des méthodes de l’API conçues pour être utilisées avec le DocumentFragment. Nous verrons également que le concept de conteneurs de nœuds est important pour d’autres technologies Web modernes, telles que le élément ou l'ensemble de l'API DOM shadow. Mais avant de commencer, nous devrions jeter un coup d’œil sur l’analyse de fragments, qui n’est pas directement liée à la DocumentFragment.
Un analyseur HTML5 peut être utilisé pour plus que la simple analyse d'un document complet. Il peut également être utilisé pour analyser une partie d'un document, appelée fragment. Définir des propriétés telles que innerHTML ou outerHTML déclenchera l'analyse des fragments. L'analyse des fragments fonctionne de manière similaire à l'analyse régulière à quelques exceptions près. La plus grande différence est la nécessité d'une racine contextuelle.
Le fragment en cours d'analyse est probablement placé en tant qu'enfant d'un élément, qui peut ou non avoir des ancêtres supplémentaires. Ces informations sont cruciales pour déterminer le mode d'analyse en cours, qui dépend de la hiérarchie de l'arborescence en cours. De plus, l'analyse des fragments ne déclenchera pas l'exécution de script pour des raisons de sécurité..
Nous pouvons donc utiliser un code similaire à celui-ci, mais nous ne verrons pas la sortie supplémentaire. L'exécution du script ne sera pas déclenchée.
javascript var foo = document.querySelector ('# foo'); foo.innerHTML = 'Bonjour le monde!';
L'analyse de fragments est un moyen simple de réduire les opérations DOM. Au lieu de créer, de modifier et d’ajouter des nœuds, qui impliquent tous des changements de contexte et donc des opérations DOM, nous travaillons exclusivement à la construction d’une chaîne, qui est ensuite évaluée et gérée par l’analyseur. Par conséquent, nous n’avons qu’une ou quelques opérations DOM. L'inconvénient de cette méthode est que nous avons besoin de l'analyseur et de plus de travail en JavaScript. La question clé est: qu'est-ce qui prend le plus de temps? Les différentes opérations DOM sont-elles plus onéreuses que toutes les manipulations de chaîne JavaScript requises ou est-ce l'inverse??
Cela dépend évidemment du cas. Pour un scénario particulier, Grgur Grisogono a effectué le travail de comparaison des performances à l'aide de plusieurs méthodes. Cela dépend aussi beaucoup du navigateur, en particulier de la vitesse du moteur JavaScript. Une valeur plus élevée signifie plus d'opérations et est donc souhaitée.
Même si les navigateurs sont plus rapides ces jours-ci, le comportement relatif est toujours valide. Cela devrait nous motiver à rechercher de meilleures solutions et à en apprendre davantage sur le DocumentFragment.
L'idée derrière le DocumentFragment noeud est simple: un conteneur pour Nœud objets. Lorsqu'un DocumentFragment est ajouté, il est développé pour n’ajouter que le contenu du conteneur, pas le conteneur lui-même. Quand une copie profonde d'un DocumentFragment est demandé, son contenu est également cloné. Le conteneur lui-même ne sera jamais attaché à un autre noeud, même s'il doit avoir un propriétaire, qui est le document qui a créé le fragment.
Créer un DocumentFragment fonctionne comme suit:
javascript var fragment = document.createDocumentFragment ();
À partir de maintenant, fragment se comporte exactement comme n'importe quel autre nœud parent DOM. Nous pouvons attacher des nœuds, supprimer des nœuds ou accéder à des nœuds existants. L'option permettant d'exécuter des requêtes CSS à l'aide de querySelector et querySelectorAll est disponible. Comme nous l’avons déjà mentionné, nous pouvons surtout cloner le noeud à l’aide de cloneNode ().
Si les fragments de document sont si volumineux, pourquoi ne pas les utiliser pour créer des modèles? Bien, un DocumentFragment ne peut pas être construit en HTML brut, car le concept est uniquement exposé via l’API DOM. Il est donc uniquement possible de créer des conteneurs en JavaScript. Cela réduit considérablement les avantages liés à l'utilisation. À l'heure actuelle, l'approche la plus populaire est toujours axée sur le texte. Nous commençons par placer notre modèle dans un pseudo >type attribut sera défini sur un type mime non valide. De cette façon, rien ne sera exécuté, mais le contenu textuel de l'élément utilisera des règles d'analyse différentes..
L'image ci-dessus montre les états de la tokénisation. Les règles d'analyse pour scénario les balises sont spéciales, car l'analyse se déroulera dans un état de tokénisation spécial. HTML connaît cinq états de tokenization, mais le cinquième, Plaintext, n'est pas d'un grand intérêt pour nous. le Rawtext l'état est très similaire à Scénario, ce qui nous laisse trois états pour expliquer.
Considérons un exemple. Nous utilisons trois éléments qui représentent bien chacun des trois États restants. le
Accentsconagua