Explication détaillée de la façon dont JavaScript crée dynamiquement des instances DOM à l'aide de chaînes-js tutoriel-php.cn

Explication détaillée de la façon dont JavaScript crée dynamiquement des instances DOM à l'aide de chaînes

伊谢尔伦

Libérer： 2017-07-18 16:16:55

original

1651 Les gens l'ont consulté

Pour créer dynamiquement un objet dom standard en JavaScript, utilisez généralement :

var obj = document.createElement(&#39;p&#39;);

Copier après la connexion

puis définissez certains attributs pour obj.
Cependant, en utilisation réelle, certaines personnes peuvent penser que ce serait génial si un objet dom standard pouvait être créé de cette manière
Pseudo code : var obj=strToDom('

Hello World!

');
Alors le but d'aujourd'hui est de vous apprendre à implémenter une telle méthode pour convertir directement une chaîne en un objet DOM standard

start :
En fait, c'est très simple d'implémenter une telle conversion. Ici on utilise principalement un attribut innerHTML
innerHTML, je crois que tout le monde l'a utilisé, notamment pour changer dynamiquement un. élément. Il est utilisé lors de l'insertion de contenu. Ici, je vais présenter innerHTML pour la commodité de ceux qui ne le connaissent pas.
InnerHTML n'est pas un standard du w3c, il a été inventé et créé par IE. Cependant, en raison de la commodité de cet attribut et du statut de Weibo à l'époque, d'autres navigateurs non-IE ont également intégré innerHTML et ont fourni une prise en charge.
Bien qu'innerHTML ne soit pas un standard du w3c, il s'agit d'un standard de facto qui est très important, c'est-à-dire que tous les navigateurs grand public prennent actuellement en charge innerHTML, il est donc naturellement compatible avec plusieurs navigateurs.

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

Copier après la connexion

La conversion s'effectue en quelques lignes de code seulement. Nous créons d'abord un p en utilisant la méthode standard, puis utilisons innerHTML pour insérer un élément. noyau. Une conversion implémentée par un algorithme. Renvoyez-le en utilisant childNodes.
De cette manière, nous avons complété la conversion d'une chaîne en DOM standard. En utilisant intelligemment le propre algorithme du navigateur, nous pouvons effectuer un grand nombre de conversions complexes avec une simple et petite quantité de code. la chaîne, mais laissez-le faire. Le navigateur le fait lui-même, ce qui est précis et sans erreur.
Utilisation :

var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p>&#39;); 
var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>&#39;);

Copier après la connexion

Remarque :
childNodes renvoie une liste de type tableau. Donc, s'il s'agit d'un élément, pour utiliser ce dom, vous devez utiliser obj[0] comme ceci. S'il s'agit de plusieurs conversions DOM au même niveau, vous pouvez utiliser obj[0], obj[1]...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!