一、Dom操作
文档对象模型DOM：一套定义、规范、准则 为了能够让程序JavaScript去操作页面中的元素节点而定义的一套标准
DOM会把文档看作是一棵树，页面中的每个元素就是树上的一个一个节点；同时DOM定义了很多方法、属性等来操作这棵树中的每一个元素（节点）——每个节点称为DOM节点。
1. 节点.children —— (没有兼容性问题：只包含元素节点) 获取第一级子元素
childNodes 获取第一级子元素 有兼容性问题（标准浏览器文本和元素视为节点，非标准浏览器只把元素视为节点），nodeType属性判断：
元素节点 ELEMENT_NODE：1
属性节点 ATTRIBUTE_NODE ：2
文本节点 TEXT_NODE：3
2 firstChild \ firstElementChild 获取子元素里的最后一个
（1）元素.firstChild：只读 属性 第一个子节点（有兼容性问题）。标准下：firstChild会包含文本类型的节点 ； 非标准下： 只包含元素节点
（2）元素.firstElementChild：只读 属性（有兼容性问题）。标准下获取第一个元素类型节点的子节点；非标准浏览器不支持
//兼容性写法:
if (元素.firstElementChild){
元素.firstElementChild.style.background = 'red';
} else {
元素.firstChild.style.background = 'red';
}
//兼容性写法:
var oFirst = 元素.firstElementChild || 元素.firstChild; //兼容写法
//兼容性写法:
var oFirst = 元素.children[0]
3 元素.lastElementChild || 元素.lastChild 获取子元素里的第一个
var oLast = 元素.lastElementChild || 元素.lastChild ;
Var oLast =children[元素.length-1]
4. 元素.nextElementSibling || 元素.nextSibling
5元素.parentNode： 只读, 属性 ,只有一个, 当前节点的父级节点
6元素.attributes
元素.attributes：只读 属性 属性列表集合
7元素.offsetParent：只读 属性 离当前元素最近的一个有定位的父节点
8Dom操作：
（1）document.createElement(标签名); 注意：
动态创建元素不会直接显示在页面当中，前面必须是document，不能是其他
（2）父级.appendChild(要追加的元素) //在指定父级子节点最后一个后面追加子元素
（3）父级.insertBefore(新的元素，指定的已有子元素);
在父级的指定子元素前面插入一个新元素(注意：先判断如果第二个参数的节点是否存在)
（4）元素.cloneNode(true) 或者元素.cloneNode(false) //深克隆（负值标签、标签属性、标签里面内容） 浅克隆（负值标签、标签属性不复制标签里面内容）
（5）父级.removeChild(已有子元素);
（6）父级.replaceChild(新的元素节点，原有元素节点);
二、实例
Html代码：
<body>
<input class="btn" type="button" value="增加一条，放在前面"/>
<input class="btn" type="button" value="删除最后一条"/>
<input class="btn" type="button" value="修改最后一条"/>
<input class="btn" type="button" value="复制第一条"/>
<input class="btn" type="button" value="设置样式"/>
<table border="1" cellspacing="0" cellpadding="10" >
<thead>
<tr>
<th>书籍</th>
<th>价格</th>
</tr>
</thead>
<tbody >
<tr>
<td >第八条猎狗</td>
<td>¥22</td>
</tr>
<tr>
<td>不抱怨的世界</td>
<td>¥22</td>
</tr>
</tbody>
</table>
</body>
JavaScript Dom操作：
var arrInputBtn = document.getElementsByClassName( "btn") ;
var bookCon = document.getElementsByTagName("tbody")[0] ;
//add 增加一条，放在倒数第二的位置即放在length-1的前面
arrInputBtn[0].onclick = function(){
var newTr =document.createElement("tr");
newTr.innerHTML=" <td>活着</td> <td>¥22</td> " ;
bookCon.insertBefore( newTr, bookCon.children[0] )
}
//del 删除最后一个即删除tr下标为length-1
arrInputBtn[1].onclick = function(){
if( bookCon.children[bookCon.children.length-1] )
bookCon.removeChild( bookCon.children[ bookCon.children.length -1] )
}
//修改最后一个 ：下标为length-1
arrInputBtn[2].onclick = function(){
if( bookCon.children[bookCon.children.length-1] )
{
var newTr = document.createElement("tr");
newTr.innerHTML=" <td>走着走着就老了</td> <td>¥22</td> " ;
bookCon.replaceChild( newTr , bookCon.children[ bookCon.children.length -1] )
}
}
//复制第一条 下标为0
arrInputBtn[3].onclick = function(){
if ( bookCon.children[0] ){
var newTr = bookCon.children[0].cloneNode( true ) ;
bookCon.insertBefore( newTr, bookCon.children[bookCon.children.length-1] )
}
}
//样式
var colors=["#faa","orange","#ffa","greenyellow","#ccc","#949","#fff"];
var i =0;
arrInputBtn[4].onclick = function(){
i%=colors.length ;
document.getElementsByTagName("table")[0].children[0].children[0].style.background=colors[i];
i++;
}
