常规DOM操作

访问和修改DOM元素
修改DOM元素的样式，造成重绘和重排版
通过DOM事件处理用户响应

DOM--文档对象模型
一 访问DOM元素和插入删除DOM元素：

//高版本浏览器(IE7以下包括IE7)获取元素   可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素,对于多个选择器，使用逗号隔开;
obj.querySelectorAll('css选择器');//获取一组
obj.querySelector('css选择器');获取一个(一类的第一个)

通过ID获取：

<div id="box"></div>
var oDiv = document.getElementById('box');//获取的是一个元素

通过标签名获取： document.getElementsByTagName('标签名')

<div></div>
<div></div>
var aDiv = document.getElementsByTagName('div');//获取的是一组元素

通过类名获取（存在兼容问题IE低版本不兼容）：

<div class="box"></div>
<p class="box"></p>
var oBox = document.getElementsByClassName('box');//同样获取的是一组元素；

//类名获取元素兼容写法：
function getByClass(obj,value){
    if(obj.getElementsByClassName){    //高级浏览器支持getElementsByClassName；
        return obj.getElementsByClassName(value);
    }else{                                      //兼容低版本IE；
        var arr = [];
        var aElt = obj.getElementsByTagName('*');
        for(var i=0; i<aElt.length; i++){
            var arr1 = aElt[i].className.split(' ');
            if(findInArray(arr1,value)){
                arr.push(aElt[i]);
            }
        }
        return arr;
    }
}
//上面获取元素可以写成：
getByClass(document,'box');

通过name获取：

<input type="text" name="username" />
<input type="text" name="username" />
var aTxt = document.getElementsByName('username');//获取一组元素

获取子节点：

obj.children;//获取一组元素;所以的子元素;
obj.childNodes;//获取一组元素;所有的子元素(包括文本元素,注释...)
需要使用nodeType属性过滤一下标签元素值为1;文本元素值为3;注释为8

获取父节点

//结构上的父级
obj.parentNode;//获取一个元素
//定位上的父级
obj.offsetParent;//获取一个元素

获取前一个兄弟节点:

obj.previousSibling;//获取一个元素;高版本浏览器会获取文本元素;低版本(IE8-)不会
//兼容写法:
oPrev = obj.previousElementSibling || obj.previousSibling;

获取下一个兄弟节点:

obj.nextSibling;
//兼容写法
oNext  =  obj.nextElementSibling || obj.nextSibling;

获取首节点(同样需兼容):

oFirst = obj.fristElementChild || obj.firstChild;
//另一种获取方式:
oFirst = obj.children[0];//这中写法要确保他有子元素,没有的话会报错;

获取尾节点(兼容):

oLast = obj.lastElementChild || obj.lastChild;
//另一种获取方式:
oLast = obj.children[obj.children.length-1];//同样需要确保有子元素;

创建DOM元素:

 document.createElement('标签名');

添加DOM元素:

//在后面添加子元素
obj.appendChild(obj对象);
//在前面添加:
obj.insertBefore(插入子元素对象,那个子对象之前);

删除DOM元素:

//在父级内删除一个子元素;
oParent.removeChild(obj);

获取滚动条滚动距离:

//横向滚动距离
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//纵向滚动距离
scrollTop = document.documentElement.scrollTop || document.body.scrollTop

获取可视区宽高

//获取可视去宽度
clientWidth = document.documentElement.clientWidth;
//获取可视去高度
clientHeight = document.documentElement.clientHeight;

获取物体的宽度高度:

//宽度
obj.offsetWidth;
//高度
obj.offsetHeight

获取物体距离相对定位父级的top和left

//left
obj.offsetLeft;
//top
obj.offstTop

获取样式:

//IE支持通过obj.currentStyle['样式名']获取;高版本支持通过getComputedStyle(obj,false)['样式名']获取,需要兼容一下下;
function getStyle(obj,name){
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj,false)[name];
}