Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la façon de créer, d'utiliser et de supprimer des instances de nœud dom en JavaScript

伊谢尔伦
Libérer: 2017-07-20 13:26:38
original
1351 Les gens l'ont consulté

Créer un nœud

Pour créer un nouveau nœud, vous pouvez utiliser createElement et createTextNode Si la nouvelle création est terminée, vous pouvez utiliser appendChild() pour ajouter. le nœud de l'arborescence DOM.

Créez un élément P et définissez l'attribut innerHTML


var myp = document.createElement('p'); 
myp.innerHTML = 'yet another';
Copier après la connexion

Une fois l'élément P construit, vous pouvez modifier et ajouter des attributs à will


myp.style.border = '2px dotted blue'
Copier après la connexion

Ensuite, vous pouvez utiliser appendChild pour ajouter de nouveaux nœuds à l'arborescence DOM.


document.body.appendChild(myp)
Copier après la connexion

Comment utiliser DOM
L'utilisation de la méthode innerHTML est en effet très simple, nous pouvons utiliser la méthode pure dom pour réaliser la fonction ci-dessus .

  • Créer un nouveau nœud de texte (encore un autre)

  • Créer un nouveau paragraphe

  • Placer le nœud de texte Ajouter au paragraphe.

  • Ajouter le paragraphe au corps


// 创建p 
var myp = document.createElement('p'); 
// 创建一个文本节点 
var myt = document.createTextNode('one more paragraph') 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement('strong'); 
str.appendChild(document.createTextNode('bold')); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()
Copier après la connexion

Une autre façon de créer un nouveau nœud est , nous pouvons utiliser cloneNode pour copier un nœud. cloneNode() peut transmettre un paramètre booléen. Si vrai, cela signifie une copie complète, y compris ses nœuds enfants, si faux, il se copie uniquement.

Récupérez d’abord l’élément à copier.


var el = document.getElementsByTagName(&#39;p&#39;)[1];//<p><em>second</em> paragraph</p>
Copier après la connexion

Pas encore besoin de copier en profondeur.


document.body.appendChild(el.cloneNode(false))
Copier après la connexion

Nous avons constaté que la page n'a pas changé car seul l'élément p a été copié. Le même effet que ci-dessous.


document.body.appendChild(document.createElement(&#39;p&#39;));
Copier après la connexion

Si vous utilisez la copie complète, tous les nœuds enfants, y compris p ci-dessous, seront copiés. Y compris les nœuds de texte et les éléments EM bien sûr.


document.body.appendChild(el.cloneNode(true))
Copier après la connexion

insertBefore()
Utilisez appendChild pour ajouter l'élément à la fin. La méthode insertBefore peut contrôler plus précisément la position des éléments insérés.


elementNode.insertBefore(new_node,existing_node)
Copier après la connexion

Instance


document.body.insertBefore( 
 document.createTextNode(&#39;boo!&#39;), 
 document.body.firstChild 
);
Copier après la connexion

signifie créer un nouveau nœud de texte et l'utiliser comme corps élément premier nœud.
Supprimer le nœud

Pour supprimer un nœud de l'arborescence DOM, nous pouvons utiliser RemoveChild() Jetons un coup d'œil au code HTML à utiliser

<🎜. >


<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>
Copier après la connexion
Jetons un œil au code suivant Supprimez le deuxième paragraphe


var myp = document.getElementsByTagName(&#39;p&#39;)[1]; 
var removed = document.body.removeChild(myp);
Copier après la connexion
Le nœud supprimé est le nœud supprimé. nœud. Le nœud supprimé pourra toujours être utilisé à l’avenir.


Nous pouvons également utiliser la méthode replaceChild(). Cette méthode consiste à supprimer un nœud et à le remplacer par un autre nœud. Après avoir effectué la dernière opération de suppression de nœud, les résultats sont les suivants


<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>
Copier après la connexion
Jetons un coup d'œil à l'utilisation de replaceChild. Nous remplaçons le dernier nœud supprimé par le deuxième p


var replaced = document.body.replaceChild(removed, p);
Copier après la connexion
qui est le même que celui renvoyé par RemoveChild. Le nœud supprimé est remplacé. Maintenant le résultat est


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal