Utilisez JS pour terminer le fonctionnement de l'addition, de la suppression, de la modification et de la copie du nœud, etc.

Auteur：Eve Cole Date de mise à jour：2025-03-13 14:00:04

Exigence: Complétez le fonctionnement de l'addition, de la suppression, du changement et de la copie du nœud

Méthodes et attributs utilisés:

1. Obtenez le nœud parent d'un nœud

Attribut ParentNode

2. Obtenez la collection de sous-nœuds d'un nœud

attribut

3. Création d'un nouveau nœud

CreateTextNode (contenu de texte de nœud) La méthode de l'objet de document n'est pas bonne en compatibilité sur certains navigateurs

Objet de document CreateElement (objet), tel que: document.CreateElement ("A");

4. Ajouter des attributs et des valeurs d'attribut à un objet d'un nœud

SettattRribute (attribut, valeur d'attribut); par exemple: anode.setAttribute ("href", "http://www.baidu.com");

5. Remplacez le sous-nœud sous un certain nœud

RemplaceChild (nouveau nœud, nœud atomique);

6. Ajouter un nœud à un nœud

APPENDE (NODE À AJOUTER)

7. Klong un certain nœud

Clonenode () ne passe pas le paramètre comme le paramètre True, indiquant que le nœud du clone comprend des sous-nodes

Copier le code du code comme suit:

<html>

<adal>

<méta http-equiv = "Description" content = "Ceci est ma page" >>

<! - <link rel = "Stylesheet" type = "text / css" href = "./ styles.css"> ->

Div {

Border: Solide rouge 1px;

Largeur: 200px;

hauteur: 50px;

marge: 20px 30px;

rembourrage: 20px;

}

# div_1 {{

Clear: les deux;

Color d'arrière-plan: # FF3366;

}

# div_2 {{

Clear: les deux;

Color d'arrière-plan: # 6699FF;

}

# div_3 {{

Clear: les deux;

Color d'arrière-plan: # CCCC99;

}

# div_4 {{

Clear: les deux;

Color d'arrière-plan: # 00cc33;

}

</ style>

// Ajouter la méthode 1: ajouter du texte à la première zone DIV

fonction addText () {

// 1. Demandez au nœud d'ajouter du contenu texte

var dig_1node = document.getElementById ("div_1");

// 2. Créez un nœud de texte. Méthode CreateTextNode de l'objet de document. Certains navigateurs ne sont pas pris en charge.

var textNode = document.CreateTextNode ("n'est-ce pas affiché?");

// 3. Ajoutez le nœud de texte à la méthode de l'APPEndChild (l'instance de sous-nœud) au nœud à ajouter

div

}

// Ajouter la méthode 2: Ajouter un bouton à la première zone DIV

fonction addButton () {

// 1. Demandez au nœud d'ajouter du contenu texte

var dig_1node = document.getElementById ("div_1");

// 2. Créez un nœud. CreateElement () de l'objet document

var anode = document.CreateElement ("entrée");

// 3. Ajouter une valeur d'attribut et d'attribut à l'objet spécifié

//anode.setAttribute 18 ", type", "bouton"); // c'est le même que l'effet du code suivant atteint

anode.type = "bouton";

anode.setAttribute ("valeur", "bouton");

Anode.setAttribute ("onClick", "DeleteText ('div_1')");

// 4. Ajouter le nœud de texte à la méthode d'ApendChild (l'instance de sous-node à ajouter) sous le nœud à ajouter

div

}

// Supprimer la méthode 1: Supprimer le sous-nœud des nœuds dans la deuxième zone

fonction deletetext (nodeid) {

// 1. Obtenez le nœud

var dignode = document.getElementById (nodeId);

// 2. Obtenez le sous-nœud, c'est-à-dire le nœud de texte

var chilenode = divnode.childnodes [0];

// 3. Supprimer, passer un paramètre True supprimera tous les sous-nodes en dessous

//ChileNode.ReMovenode ();

Divnode.removechild (chilenode);

}

// Supprimer la méthode deux: supprimer les éléments

fonction deleteelement () {

// 1. Obtenez le nœud

var dig_2node = document.getElementById ("div_2");

// 2. Obtenez le nœud parent,

var parentNode = div_2Node.

// 3. Supprimer

ParentNode.RemoveChild (div_2Node);

}

// Réviser

fonction updateText () {

// 1 Obtenez le nœud de la zone où vous souhaitez modifier le caractère

var dig_3Node = document.getElementById ("div_3");

// 2. Obtenez la collection de sous-nœuds dans la première étape, spécifiez le nœud à modifier

var childNode = div_3Node.childNodes [0];

// 3. Créez un nœud de texte

var newNode = document.CreateTextNode ("Haha, je vous ai remplacé.");

// 4. Utilisez 3 étapes pour remplacer le nœud à l'étape 2 étapes

//Childnode.replacenode (newnode); // Cette méthode n'est pas compatible avec Firefox et Google

div

}

//cloner

Fonction copynode () {

// 1. Obtenez le quatrième nœud régional

var dig_1node = document.getElementById ("div_1");

// 2. Obtenez le premier nœud de zone

var dig_4node = document.getElementById ("div_4");

// 3. Obtenez un nouveau nœud à travers le quatrième nœud du clone

var newNode = div

// 4. Remplacez le nouveau nœud de l'étape 3 pour supprimer le premier nœud d'origine

div

}

</cript>

</ head>

<body>

<div id = "div_2"> Il s'agit de la deuxième zone </div>

<div id = "div_3"> C'est le troisième domaine </div>

<div id = "div_4"> Il s'agit de la quatrième zone </div>

<hr />

<font size = "12px"> augmentation: </font>

<entrée type = "bouton" value = "Ajouter du texte à la première zone" onclick = "addText ()" />

<entrée type = "bouton" value = "Ajouter un bouton à la première zone" onclick = "addButton ()" />

<hr />

<font size = "12px"> supprimer: </font>

<hr />

<font size = "12px"> Changer: </font>

<hr />

<font size = "12px"> Clonage: </font>

</docy>

</html>