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

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

伊谢尔伦original: 2017-07-20 13:26:381421parcourir

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(&#39;p&#39;); 
myp.innerHTML = &#39;yet another&#39;;

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

myp.style.border = &#39;2px dotted blue&#39;

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

document.body.appendChild(myp)

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(&#39;p&#39;); 
// 创建一个文本节点 
var myt = document.createTextNode(&#39;one more paragraph&#39;) 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement(&#39;strong&#39;); 
str.appendChild(document.createTextNode(&#39;bold&#39;)); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

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>

Pas encore besoin de copier en profondeur.

document.body.appendChild(el.cloneNode(false))

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

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

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)

Instance

document.body.insertBefore( 
 document.createTextNode(&#39;boo!&#39;), 
 document.body.firstChild 
);

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>

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

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>

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

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!

Déclaration：

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

Article précédent：Explication détaillée de la façon de parcourir et de modifier les instances dom en JavaScriptArticle suivant：Explication détaillée de la façon de parcourir et de modifier les instances dom en JavaScript

Articles Liés

Voir plus