分类 Node：节点对象，其他五个节点的父对象，里面封装了其他DOM通用方法，所以其他对象都可以称为节点对象。Document：文档对象/节点Element：元素对象/节点Attribute：属性对象/节点Text：文本对象/节点Comment：注释对象/节点
Node
方法
父节点.appendChild(子节点)：给父节点添加子节点
父节点.removeChild(子节点)：删除父节点的子节点
属性
parentNode：获取父节点
Document
获取Element对象方法
getElementById()：根据id属性值获取Element（标签）对象getElementsByTagName()：根据元素(标签)名称获取Element(标签)对象(复数数组)，获取要使用索引[]getElementsByClassName()：根据Class属性值获取Element(标签)对象(复数数组)，获取要使用索引[]getElementsByName()：根据name属性值获取Element(标签)对象(复数数组)，获取要使用索引[]
创建Element对象方法
createElement(“标签名”); 创建元素节点
！！！这个方法要用document调用。
！！！这个方法要用document调用。
！！！这个方法要用document调用。
Element
方法 元素对象.removeAttribute(“属性名”)：删除属性元素对象.setAttribute(“属性名",“属性值”)：设置属性综合案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOM综合练习</title><script>window.onload=function (){document.getElementById("get_stu").onclick=function () {//获取各个输入框输入的值var id = document.getElementById("id").value;var name = document.getElementById("name").value;var age = document.getElementById("age").value;var gender = document.getElementById("gender").value;var hobby = document.getElementById("hobby").value;//获取表格,因为只有一个表格，所以通过标签名进行获取var table = document.getElementsByTagName("table")[0];//创建行标签trvar tr = document.createElement("tr");//创建第一列id的列标签元素tdvar id_td = document.createElement("td");//创建文本节点var id_text = document.createTextNode(id);//2-5列参考第一列注释var name_td = document.createElement("td");var name_text = document.createTextNode(name);var age_td = document.createElement("td");var age_text = document.createTextNode(age);var gender_td = document.createElement("td");var gender_text = document.createTextNode(gender);var hobby_td = document.createElement("td");var hobby_text = document.createTextNode(hobby);//删除操作var del_td = document.createElement("td");//创建一个a标签元素var del_a = document.createElement("a");//给a标签的元素进行属性赋值del_a.setAttribute("href","javascript:void(0);");del_a.setAttribute("onclick","del(this)");//给a标签的文本赋值var del_text = document.createTextNode("删除");//通过a标签添加文本节点del_a.appendChild(del_text);//通过td标签添加文本对象子节点id_td.appendChild(id_text);name_td.appendChild(name_text);age_td.appendChild(age_text);gender_td.appendChild(gender_text);hobby_td.appendChild(hobby_text);del_td.appendChild(del_a);//通过tr标签添加td节点tr.appendChild(id_td);tr.appendChild(name_td);tr.appendChild(age_td);tr.appendChild(gender_td);tr.appendChild(hobby_td);tr.appendChild(del_td);//通过table标签添加子节点trtable.appendChild(tr);};};//删除方法function del(obj) {//调用该方法的标签获取父节点可以得到table（<a>(obj) -> <td> -> <tr> -> <table>）var table = obj.parentNode.parentNode.parentNode;//同样的方式获取tr标签var tr = obj.parentNode.parentNode;//通过table节点删除tr节点完成删除table.removeChild(tr);}</script></head><body><br><p>学生信息</p><br><label>学号：<input type="text" id="id" name="stu_id"></label><br><label>姓名：<input type="text" id="name" name="stu_name"></label><br><label>性别：<input type="text" id="age" name="stu_age"></label><br><label>性别：<input type="text" id="gender" name="stu_gender"></label><br><label>爱好：<input type="text" id="hobby" name="stu_hobby"></label><br><input type="button" id="get_stu" name="get_stu" value="提交"><table><tr><td>学号</td><td>姓名</td><td>年龄</td><td>性别</td><td>爱好</td><td>操作</td></tr><tr><td>1</td><td>66</td><td>18</td><td>女</td><td>Gameing</td><!-- a标签作为按钮使用，将href属性设置为javascript:void(0) onclick调用定义好的对象即可 --><td><a href="javascript:void(0)" onclick="del(this)">删除</a></td></tr></table></body></html>
