认识DOM：
文档对象模型DOM定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构（节点树）
HTML文档可以说由节点构成的集合，DOM节点有：
元素节点：<html>,<body>,<p>等都是元素节点，即标签
文本节点：向用户展示的内容<li>....</li>中的javascript,DOM，CSS等文本
属性节点：元素属性，如<a>标签的链接属性href="http://www.baidu.com"
节点属性：
nodeName 返回一个字符串，其内容是给定节点的名字
nodeType 返回一个整数，这个数值代表给定节点的类型
nodeValue 返回给定节点的当前值
遍历节点树
childNodes 返回一个数组由给定元素节点的子节点构成
firstChild返回第一个节点
lastChild返回最后一个子节点
parenNode 返回一个给定节点的父节点
nextSibling 返回给定节点的下一个子节点
previousSibling返回给定节点的上一个子节点
DOM操作：
createElement(element) 创建一个新的元素节点
createTextNode() 创建一个包含着给定文本的新文本节点
appendChild()指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore()将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild()从一个给定元素中删除一个子节点
replaceChild()把一个给定父元素里的一个子节点替换为另一个节点
例子：操作表格
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(){ Highlight(); } function addOne(obj){ var tbody = document.getElementById('table').lastChild; var tr = document.createElement('tr'); var td = document.createElement("td"); td.innerHTML = "<input type='text'/>"; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = "<input type='text'/>"; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>删除</a>"; tr.appendChild(td); tbody.appendChild(tr); Highlight(); } function deleteRow(obj){ var tbody = document.getElementById('table').lastChild; var tr = obj.parentNode.parentNode; tbody.removeChild(tr); } function Highlight(){ var tbody = document.getElementById('table').lastChild; trs = tbody.getElementsByTagName('tr'); for(var i =1;i<trs.length;i++){ trs[i].onmouseover = function(){ this.style.backgroundColor ="#f2f2f2"; } trs[i].onmouseout = function(){ this.style.backgroundColor ="#fff"; } } } </script> </head> <body> <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" οnclick="deleteRow(this)">删除</a></td> </tr> </table> <input type="button" value="添加一行" οnclick="addOne()" /> </body> </html>
