Use JS para concluir a operação da adição, exclusão, modificação e cópia do nó, etc.

Autor：Eve Cole Data da Última Atualização：2025-03-13 14:00:04

Requisito: Preencha a operação da adição, exclusão, mudança e cópia do nó

Métodos e atributos usados:

1. Obtenha o nó pai de um nó

Atributo parentnode

2. Obtenha a coleção de sub -nó de um nó

Childnodes atributo

3. Criando um novo nó

CreateTextNode (conteúdo de texto do nó) O método do objeto de documento não é bom em compatibilidade em alguns navegadores

Objeto de documento CreateElement (objeto), como: document.createElement ("a");

4. Adicione atributos e valores de atributo a um objeto de um nó

Settattribute (atributo, valor do atributo);

5. Substitua o sub -nó sob um certo nó

replacechild (novo nó, nó atômico);

6. Adicione um nó a um nó

AppendChild (Nó a ser adicionado)

7. Klong um certo nó

CLONENODE () não passa no parâmetro como o parâmetro verdadeiro, indicando que o nó do clone inclui sub -nodes

Copie o código do código da seguinte forma:

<html>

<head>

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

Div {

Borda: vermelho 1px sólido;

Largura: 200px;

Altura: 50px;

margem: 20px 30px;

preenchimento: 20px;

}

#div_1 {{

Claro: ambos;

Background-Color:#FF3366;

}

#div_2 {{

Claro: ambos;

Background-Color:#6699FF;

}

#div_3 {{

Claro: ambos;

Background-Color:#CCCC99;

}

#div_4 {{

Claro: ambos;

Background-Color:#00CC33;

}

</style>

// Adicionar método 1: Adicione texto à primeira área div

função addText () {

// 1. Obtenha o nó para adicionar conteúdo de texto

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

// 2. Crie um nó de texto. Método CreateTextNode do objeto de documento. Alguns navegadores não são suportados.

var textNode = document.createTextNode ("Isso não é exibido?");

// 3. Adicione o nó de texto ao método AppendChild (a instância do sub -nó) ao nó a ser adicionado

div

}

// Adicionar método 2: Adicionar botão à primeira área div

função addButton () {

// 1. Obtenha o nó para adicionar conteúdo de texto

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

// 2. Crie um nó. CreateElement () do objeto de documento

var anode = document.createElement ("entrada");

// 3. Adicione o valor de atributo e atributo ao objeto especificado

//anode.setAttribute 18 ", tipo", "botão"); // é o mesmo que o efeito do seguinte código alcançado

anode.type = "Button";

anode.setattribute ("value", "botão");

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

// 4. Adicione o nó de texto ao método de APENDCHILD (a instância do sub -nó para adicionar) no nó a ser adicionado

div

}

// Método de exclusão 1: Exclua o sub -nó de nós na segunda área

função deletetetext (nodeid) {

// 1. Pegue o nó

var dignode = document.getElementById (nodeId);

// 2. Obtenha o sub -nó, ou seja, o nó de texto

var chilenode = divnode.childnodes [0];

// 3. Excluir, passe um parâmetro true excluirá todos os sub -nodos

//Chilenode.reMovenode ();

Divnode.RemoveChild (Chilenode);

}

// Excluir método dois: Excluir elementos

função deleteElement () {

// 1. Pegue o nó

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

// 2. Obtenha o nó pai,

Var ParentNode = Div_2Node.

// 3. Exclua

Parentnode.removeChild (div_2node);

}

// revisar

função updateText () {

// 1 Obtenha o nó da área onde você deseja modificar o personagem

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

// 2. Obtenha a coleção de sub -nó na primeira etapa, especifique o nó a ser modificado

var childNode = div_3node.childnodes [0];

// 3. Crie um nó de texto

var newNode = document.createTextNode ("haha, eu substituí você.");

// 4. Use 3 etapas para substituir o nó na etapa 2 etapas

//Childnode.replacenode (newNode); // Este método não é compatível com o Firefox e o Google

div

}

//clone

Função copynode () {

// 1. Obtenha o quarto nó regional

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

// 2. Obtenha o nó da primeira área

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

// 3. Obtenha um novo nó no quarto nó do clone

var newNode = div

// 4. Substitua o novo nó da etapa 3 para remover o primeiro nó original

div

}

</script>

</head>

<Body>

<div id = "div_2"> Esta é a segunda área </div>

<div id = "div_3"> Esta é a terceira área </div>

<div id = "div_4"> Esta é a quarta área </div>

<hr />

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

<hr />

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

<hr />

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

<hr />

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

</body>

</html>