Notas del estudio de JS 12-adición, eliminación, modificación e investigación

1. Incrementar

1. Cree el nodo de elemento document.createElement ()

(1) document.createElement se puede utilizar para crear un objeto de nodo de elemento.
(2) Necesita un nombre de etiqueta como parámetro, creará un objeto de nodo de elemento basado en el nombre de etiqueta y devolverá el objeto creado como valor de retorno.var li=document.createElement("li")

2. Cree un objeto de nodo de texto document.createTextNode ()

(1) Se puede usar para crear un objeto de nodo de texto
(2) Necesita un contenido de texto como parámetro, creará un nodo de texto basado en el contenido y devolverá el nuevo nodo.var gxText=document.createTextNode("广州")

3. Agregue un nuevo nodo secundario appendChild () al nodo principal.

(1) Agregue el nodo de texto al nodo del elemento
(2) Uso: nodo principal.appendChild (nodo secundario);li.appendChild(gxText)

4. Inserte un nuevo nodo secundario antes del nodo secundario especificado insertBefore ()

(1) insertBefore () puede insertar un nuevo nodo hijo antes del nodo hijo especificado
(2) Sintaxis: nodo padre. InsertBefore (nodo nuevo, nodo antiguo);

5. El nuevo nodo reemplaza al antiguo replaceChild ()

(1) Puede utilizar el nodo hijo especificado para reemplazar el nodo hijo existente
(2) Sintaxis: nodo padre.replaceChild (nodo nuevo, nodo antiguo)city.replaceChild(li,bj)

6. Elimine el nodo secundario removeChild ()

(1) removeChild () puede eliminar un nodo secundario
(2) Sintaxis:
parent
node.removeChild (child node) child node.parentNode.removeChild (child node)
city.removeChild(bj)
(3) Cuando no sabe quién es el nodo principal, puede obtener el primer nodo principal, no es necesario que obtenga el nodo principal primero.bj.parentNode.removeChild(bj)

7. Agregue nuevos nodos a través de innerHTML

(1) El uso de innerHTML también puede completar las operaciones relacionadas de adición, eliminación y modificación de DOM.
(2) Generalmente, se combinará con el método anterior.
(2) Sintaxis: parent node.innerHTML + = "new node"

Dos, eliminar

1. Eliminar la información del empleado

(1) Después de hacer clic en el hipervínculo, elimine la información de un empleado.
Después de hacer clic en el hipervínculo, el hipervínculo saltará a la página. Este es el comportamiento predeterminado del hipervínculo, pero en este momento, no queremos el comportamiento predeterminado. Devuelve falso para cancelar el comportamiento predeterminado.

//删除tr的响应函数
function delA(){
    
    
var tr=this.parentNode.parentNode;

//获取要删除的员工的名字
var name=tr.getElementByTagName("td")
[0].innerHTML;
//var name=tr.children[0].innerHTML;

//删除之前弹出提示框
var flag=confirm("确认删除"+name+"吗？？");

//如点击确认
if(flag){
    
    
  //删除tr
  tr.parentNode.removeChild(tr);
}
}

//获取所有的超链接
var allA=document.getElementByTagName("a");

//为每一个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
    
    

/*for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已执行完毕
*/
allA[i].onclick=delA;

//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接，那么this就是谁
//通过this去获取this所在的那一行元素，然后进行删除

}

(2) El usuario confirm () muestra un cuadro de aviso para los botones de confirmación y cancelación, que requiere una cadena de caracteres como parámetro, y la cadena de caracteres se utilizará como mensaje de aviso. Devuelve verdadero si el usuario hace clic en Aceptar, falso si cancela

Tres, agregue

1. Agregue la información del empleado
(1) Después de hacer clic en el botón, agregue la información del empleado al formulario

//获取用户添加的员工信息
//获取员工的名字
var name=document.getElementById("empName").value;
//获取email,salary
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;

//需要将获取到的信息保存到tr中
//创建一个tr
var tr=ducument.createElement("tr");

//创建四个td
var nameTd=docuemnt.createElement("td");
var emailTd=docuemnt.createElement("td");
var salaryTd=docuemnt.createElement("td");
var aTd=docuemnt.createElement("td");

//创建一个a元素
var a=document.createElement("a");

//创建文本内容
var nameText=document.createTextNode(name);
var emailText=document.createTextNode(email);
var salaryText=document.createTextNode(salary);
var delText=document.createTextNode("Delete");
//将创建好的td加入到tr中去
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);

//将文本节点添加到td中去
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText);

//将a元素加入到tr中
aTd.appendChild(a);

//向a中添加href属性
a.href="javascript:;";

//为新添加的a帮绑定一次单击响应函数
a.onclick=delA;

//获取table
var employeeTable=document.getElemrntById("employeeTable");

//获取employeeTable中的tbody
var tbody=employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(tr);

El segundo método de sumar

//设置tr中的内容
tr.innerHTML="<td>"+name+"</td>"+
             "<td>"+email+"</td>"+
             "<td>"+salary+"</td>"+
             "<td><a href="javascript:;">Delete</a></td>"
var a=tr.getElementsByTagName("a")[0];
a.onclick=delA;