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

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

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

Copier après la connexion

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

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

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(&#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()

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!