1. 节点操作：（通过父子系关系）
childNodes 获取当前元素的所有子节点；
nodeType 节点种类，返回值是数字；
nodeValue 获取（文字）节点的文本内容；
nodeName 返回node节点名称 #text，注释， 标签. 返回元素节点时为大写例如SPAN
2. nodeType 值含义
1 元素（DIV、BODY、LI、SPAN....... ）
2 属性代表属性节点 （class，src，href）
3 文本节点（text节点）
8 代表注释节点
9 代表document节点；
3. innerHTML和nodeValue;(当innerHTML和nodeValue分别作为左值的时候)
box.innerHTML = 'abc';
box.childNodes[0].nodeValue = 'abc';
innerHTML会将标签解析；nodeValue不会进行解析，会将标签名转译成字符串，直接输出；
4. 父子节点 兄弟节点
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点
5. 创建文档碎片
var cache = document.createDocumentFragment();
for( var i = 0 ; i < 1000; i ++ ){
var opt = document.createElement("input");
opt.type="button";
opt.value = "删除";
cache.appendChild(opt);
}
document.body.appendChild(cache); //只对文档插入进行一次操作 节省性能
6. DOM尺寸
box.style.width
box.style.height
只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空
getStyle(box,"width")
getStyle(box,"width")
//如下getStyle方法的封装
通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto。
box.clientWidth
box.clientHeight
返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框）
box.scrollWidth
box.scrollHeight
获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）
返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度
box.offsetWidth
box.offsetHeight
返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度包含盒模型中除margin以外的宽高（包含边框）最稳定，使用最频繁
7. 获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};};
8. 位置坐标（结合定位来用）
box.clientLeft box.clientTop
获取左边框和上边框的宽度
box.offsetLeft box.offsetTop
获取元素当前相对于offsetParent父元素的位置
box.scrollTop box.scrollLeft
获取滚动内容上方的位置(就是隐藏的内容的高度) 获取滚动内容左方的位置