BOM

childNodes children
兄弟 子 父 节点
childNodes:只读属性 子节点列表集合
标准下：包含文本元素类型节点，也包含非法嵌套子节点【一级子节点】
非标准：只包含元素节点：IE7（含）以下不会包含非法嵌套子节点【一级子节点】

children:只读属性 子节点列表集合
只包含元素类型节点；其他基本和childNodes相同

var y = 元素.childNodes;
for(var i = 0; y.length; i++){
    if(y[i].nodeType == 1){
        //元素节点
    }else if(y[i].nodeType == 2){
        //属性节点
    }else if(y[i].nodeType == 3){
        //文本节点
    }
};

firstChid: 只读属性 第一个子节点
非标准：只包含元素节点
标准：会包含文本类型节点
firstElementChild: 只读 属性 标准下获取第一个元素类型子节点【标准下才有】

lastChild || lastElementChild : 获取最后一个子元素

nextSibling || nextElementSibling ： 下一个兄弟节点

previousSibling||previousElementSibling: 上一个兄弟节点

if(元素.firstElementChild){
    //标准下走这里
    元素.firstElementChild.style.background = "red";
}else{
    //非标准下走这里
    元素.firstChild.style.background = "red";
}
//这样写比较feel  
var first = 元素.firstElementChid || firstChild;
first.style.background = "red";

//有问题。。。标准下
children[] 

---

parentNode: 只读 属性 当前节点的父级节点

offsetParent: 只读 属性 离当前元素最近的一个有定位属性的父节点
没有有定位父级，默认是body；IE7下当前元素没有定位是body，有html，如果当前元素某个父节点触发haslayout.就是它

---

尺寸

---

offsetLeft[Top]:只读 属性 当前元素到定位父级的距离 <偏移值> ；
就是到offsetParent的值
如果没有定位父级
offsetParent – > body
offsetLeft –>html
ie7：如果自己没有定位，那么offsetLeft[Top]是到body的距离。
如果自己有定位，那么就是到定位父级的距离
其他：到定位父级

---

    width  height 一样样
    width                      //样式宽  
    clientWidth            //样式宽+padding    ； 可视宽
    offsetWidth           //样式宽+padding + border   ；占位宽 

---

位置

//元素到页面的绝对距离
function getPos(obj){
    var pos = {left:0,top:0};
    while(obj){
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    };
    return pos;
};

---

创建元素
var oo = document.createElement(标签名称)； //创建元素
//添加到页面
父.appendChild(oo) 方法 追加到子元素
父.insertBefore(新元素，被插入的元素) 在指定元素的前面插入一个新元素
在ie下如果第二个参数节点不存在，报错
在其他标准浏览器下如果第二个参数的节点不存在，则会appendChild（00）；
父.replaceChild(新节点，旧节点) 替换节点

---

get

var getElementsByClassName = function (searchClass, node,tag) { 
    if(document.getElementsByClassName){ 
        var nodes = (node || document).getElementsByClassName(searchClass),result = []; 
        for(var i=0 ;node = nodes[i++];){ 
            if(tag !== "*" && node.tagName === tag.toUpperCase()){ 
                result.push(node);
            }else{ 
                result.push(node);
            } 
        } 
        return result 
    }else{ 
        node = node || document; 
        tag = tag || "*"; 
        var classes = searchClass.split(" "), 
        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 
        patterns = [], 
        current, 
        match; 
        var i = classes.length; 
        while(--i >= 0){ 
            patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)")); 
        } 
        var j = elements.length; 
        while(--j >= 0){ 
            current = elements[j]; 
            match = false; 
            for(var k=0, kl=patterns.length; k<kl; k++){ 
                match = patterns[k].test(current.className); 
                if (!match) break; 
            } 
            if (match){
                result.push(current); 
            } 
            return result; 
        } 
}