Requisito: complete el funcionamiento de la adición, eliminación, cambio y copia del nodo
Métodos y atributos utilizados:
1. Obtenga el nodo principal de un nodo
Atributo parentNode
2. Obtenga la colección de subnodo de un nodo
atributo de nodos de niños
3. Creación de un nuevo nodo
CreateTextNode (contenido de texto de nodo) El método de objeto de documento no es muy compatible en algunos navegadores
CreateElement (objeto) Objeto de documento, como: document.createElement ("a");
4. Agregue atributos y valores de atributo a un objeto de un nodo
settattribute (atributo, valor de atributo);
5. Reemplace el sub -nodo bajo cierto nodo
ReplaceChild (nuevo nodo, nodo atómico);
6. Agregue un nodo a un nodo
Appendchild (nodo a agregar)
7. Klong cierto nodo
Clonenode () no pasa el parámetro como el parámetro verdadero, lo que indica que el nodo del clon incluye sub -nodes
Copiar código del código de la siguiente manera:
<!
<html>
<Evista>
<title> node_curd.html </title>
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "descripción" content = "esta es mi página" >>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<!-<link rel = "stylesheet" type = "text/ css" href = "./ styles.css">->
<Style type = "text/css">
Div {
Borde: rojo 1px sólido;
Ancho: 200px;
Altura: 50px;
margen: 20px 30px;
relleno: 20px;
}
#div_1 {{
Claro: ambos;
Color de fondo:#FF3366;
}
#div_2 {{
Claro: ambos;
Color de fondo:#6699ff;
}
#div_3 {{
Claro: ambos;
Color de fondo:#CCCC99;
}
#div_4 {{
Claro: ambos;
Color de fondo:#00CC33;
}
</style>
<script type = "text/javaScript">
// Agregar Método 1: Agregar texto a la primera área Div
función addText () {
// 1. Obtenga el nodo para agregar contenido de texto
var dig_1node = document.getElementById ("div_1");
// 2. Cree un nodo de texto. Método CreatetextNode del objeto de documento. Algunos navegadores no son compatibles.
var textNode = document.createTextNode ("¿No se muestra esto?");
// 3. Agregue el nodo de texto al método appendChild (la instancia sub -node) al nodo a agregar
div
}
// Agregar método 2: Agregar botón a la primera área DIV
función addButton () {
// 1. Obtenga el nodo para agregar contenido de texto
var dig_1node = document.getElementById ("div_1");
// 2. Cree un nodo. CreateElement () del objeto de documento
var anode = document.createElement ("entrada");
// 3. Agregue el atributo y el valor de atributo al objeto especificado
//anode.setattribute 18 ", type", "botón"); // es el mismo que el efecto del siguiente código alcanzado
anode.type = "botón";
anode.SetAttribute ("valor", "botón");
Anode.setAttribute ("onClick", "deletetext ('div_1')");
// 4. Agregue el nodo de texto al método de ApendChild (la instancia sub -node para agregar) en el nodo a agregar
div
}
// Eliminar el método 1: eliminar el subnodo de los nodos en la segunda área
función deletetext (nodeid) {
// 1. Obtén el nodo
var dignode = document.getElementById (nodeid);
// 2. Obtenga el sub -nodo, es decir, el nodo de texto
var chileNode = divnode.childnodes [0];
// 3. Eliminar, pasar un parámetro verdadero eliminará todos los sub -nodos debajo
//Chilenode.remoundode ();
Divnode.removechild (ChileNode);
}
// Eliminar el método dos: eliminar elementos
función deleteElement () {
// 1. Obtén el nodo
var dig_2node = document.getElementById ("div_2");
// 2. Obtenga el nodo principal,
var parentNode = div_2Node.
// 3. Eliminar
ParentNode.remoVechild (div_2node);
}
// Revisar
function UpdateText () {
// 1 Obtenga el nodo del área donde desea modificar el personaje
var dig_3node = document.getElementById ("div_3");
// 2. Obtenga la colección sub -node en el primer paso, especifique el nodo que se modificará
var childNode = div_3node.childnodes [0];
// 3. Cree un nodo de texto
var newnode = document.createTextNode ("jaja, te reemplazé");
// 4. Use 3 pasos para reemplazar el nodo en los pasos del paso 2
//Childnode.replacenode (newnode); // Este método no es compatible con Firefox y Google
div
}
//clon
Función copynode () {
// 1. Obtenga el cuarto nodo regional
var dig_1node = document.getElementById ("div_1");
// 2. Obtenga el primer nodo de área
var dig_4node = document.getElementById ("div_4");
// 3. Obtenga un nuevo nodo a través del cuarto nodo del clon
var newnode = div
// 4. Reemplace el nuevo nodo del paso 3 para eliminar el primer nodo original
div
}
</script>
</ablo)
<Body>
<div id = "div_1"> </div>
<div id = "div_2"> Esta es la segunda área </div>
<div id = "div_3"> Esta es la tercera área </div>
<div id = "div_4"> Esta es la cuarta área </div>
<hr />
<font size = "12px"> Aumento: </font>
<input type = "button" value = "Agregar texto al primer área" onClick = "addText ()" />
<input type = "button" value = "Agregar un botón a la primera área" onClick = "addButton ()" />
<hr />
<font size = "12px"> Eliminar: </font>
<input type = "button" value = "Eliminar el contenido de texto en la segunda área" onClight = "Deletetext ('div_2')" /> />
<input type = "button" value = "eliminar la segunda área" onClick = "deleteElement ()" />
<hr />
<font size = "12px"> Cambio: </font>
<input type = "button" value = "modifique el contenido en el tercer área" onClick = "UpdateTetext ()" /> />
<hr />
<font size = "12px"> Cloning: </font>
<input type = "button" value = "clonó la cuarta región a la primera región" onClick = "copynode ()" /> />
</body>
</html>