元素的属性操作：
nodeType 返回一个数字(元素：1，属性：2)
找到某个元素下个所有元素子节点: [2]->childNodes; [2]->children(不是标准的属性，但是所有浏览器都支持。)
查找某个元素的父节点：parentNode
找到某个元素的下个兄弟节点：nextElementSibling
找到某个元素的上个兄弟节点：previousElementSibling
元素的定位距离计算：
offsetLeft:左外边框到有定位父级的左内边框的距离。
offsetTop:上外边框到有定位父级的上内边框的距离。
offsetParent:最近的有定位属性的祖先节点，如果祖先节点都没有定位，那么默认为body
[说明：offsetXXX是不带单位的]
getBoundingClientRect(返回值为一个对象)：获取某个元素的信息（高版本：left,top,bottom,rigit,width,height）
元素的属性操作：
获取元素行间的属性 ：elem.getAttribute('key')
设置元素的行间属性 ：elem.setAttribute('key','value')
删除元素的行间属性 ：elem.removeAttribute('key')
元素尺寸的计算：
获取某个元素的宽高：elem.clientWidth/ elem.clientHeight (不计算边框 加上padding)
获取某个元素的宽高：elem.offsetWidth/ elem.offsetHeight (计算边框 加上padding)
可视区的宽高：document.documentElement.clientWidth/document.documentElement.clientHeight
offsetWidth实际获取的是盒模型(width+border + padding)
offsetLeft = left + marginLeft
offsetTop = top +marginTop
<style>
#div1{200px; height: 200px; background: #eee; border:10px solid #ccc; padding:5px; margin:10px; position: absolute;}
</style>
<div id="div1"></div>
<script>
// 获取某个元素的宽高：elem.clientWidth/ elem.clientHeight (不计算边框 加上padding)
// 获取某个元素的宽高：elem.offsetWidth/ elem.offsetHeight (计算边框 加上padding)
// 可视区的宽高：document.documentElement.clientWidth/document.documentElement.clientHeight
var oDiv = document.getElementById('div1');
console.log('div的宽：' + oDiv.clientWidth + ',div的高：' + oDiv.clientHeight); //210 = width(height) + padding
console.log('div的宽：' + oDiv.offsetWidth + ',div的高：' + oDiv.offsetHeight); //230 = width(height) + padding + border
// 获取可视区宽高
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
// 获取元素自身的宽高
var iW = oDiv.offsetWidth;
var iH = oDiv.offsetHeight;
// 让div水平垂直居中
oDiv.style.left = (clientW - iW)/2 + 'px';
oDiv.style.top = (clientH - iH)/2 + "px";
console.log('div的offsetWidth的值是：' + iW + 'px' + 'div的offsetHeight的值是：' + iH + 'px' );
console.log('可视区的宽是：' + clientW + 'px' + '，可视区的高是：' + clientH + 'px' );
</script>
元素的操作：
创建元素：document.createElement('标签的名字');
插入元素：（向父级末尾添加一个元素） parentNode.appendChild(childNode)
插入元素：（向父级中的某个元素前插入元素） parentNode.insertBefore(新添加的元素,已有的元素)
特性： 如果第二个参数为假的，那么会将某个元素添加到父元素的末位。
删除节点: 父级.removeChild(指定的子节点)
注意： 如果指定的子节点没有，那么会报错。（进行判断解决）
替换节点：父级.replaceChild(要替换成什么,谁被替换)
克隆某个元素 ：元素.cloneNode()
注意： 在克隆的时候，默认（false）只克隆指定元素本身，不会克隆该元素下的所有子节点。（cloneNode(有参数，默认为false)），
如果里面传入true，那么就可以克隆该元素下的所有子节点。 事件是不会被克隆的。
注意： appendChild/insertBefore/replaceChild在操作一个已有的元素时， 是将已有的元素移动，而不是复制一份进行操作。
添加子节点实例DEMO:
<input type="button" name="" id="btn" value="点击添加" />
<ul id="ul">
</ul>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var iNow = 0;
var aLi = oUl.getElementsByTagName('li');
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = iNow ++ ;
// 方法一
if(!aLi.length){
oUl.appendChild(oLi);
}else{
oUl.insertBefore(oLi , aLi[0]);
}
// 方法二
// oUl.insertBefore(oLi , aLi[0]);
// oUl.insertBefore(oLi , null); //第二个参数为假，相当于appendChild
console.log(iNow);
}
}
</script>
JS获取表格元素：
table.tHead --> 获取tHead
table.rows --> 获取tr 获取的是行数（一组）
table.tFoot---获取表格底部
table.tBodies---获取表格主体
注意： 获取到的是一个集合
rows[n].cells
单元格 就是td