DOM_Node对象与案例4_动态表格_添加
DOM_Node对象
节点可以是元素节点、属性节点、文本节点，或者也可以是"节点类型"那一节中所介绍的任何一种节点。
请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致DOM错误。
IE: Internet Explorer,F: Firefox, o: Opera, W3C:万维网联盟(因特网标准)
Node：节点对象，其他5个的父对象
特点：所有dom对象都有可以被认为是一个节点
方法：
*appendchild():向节点的子节点列表的结尾添加新的子节点。
*removechild():删除(并返回)当前节点的指定子节点。
*replacechild():用新节点替换一个子节点。
属性
* parentNode 返回节点的父节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Node对象</title> <style> div{ border: 1px solid red; } #div1{ width: 200px; height: 200px; } #div2{ width: 100px; height: 100px; } #div3{ width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <!--<input type="button" id="del" value="删除子节点">--> <script> //1.获取超链接 var element_a = document.getElementById("del"); //2.绑定单击事件 element_a.onclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //1.获取超链接 var element_add = document.getElementById("add"); //2.绑定单击事件 element_add.onclick = function(){ var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } /* 超链接功能： 1.可以被点击：样式 2.点击后跳转到href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0);" */ var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1); </script> </body> </html>
案例4_动态表格_添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> </tr> </table> <script> /* 分析： 1.添加： 1. 给添加按钮绑定单击事件 2. 获取文本框的内容 3. 创建td，设置td的文本为文本框的内容。 4. 创建tr 5. 将td添加到tr中 6. 获取table，将tr添加到table中 2.删除： 1.确定点击的是哪一个超链接 <a href="javascript:void(0);" onclick="delTr(this);" >删除</a> 2.怎么删除？ removeChild():通过父节点删除子节点 */ //1.获取按钮 document.getElementById("btn_add").onclick = function(){ //2.获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3.创建td，赋值td的标签体 //id 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } </script> </body> </html>
