DOM BOM

DOM层级，节点间的关系：

子级：一级子级
    父.children
父级：
    子.parentNode
下一个兄弟：
    obj.nextSibling
        在高级浏览器下，会找到文本节点 
    obj.nextElementSibling
        兼容性：ie9+  FF  Chrome
        ie7 8 :undefined
        解决兼容性问题：    
            1)if...else
            2)var oNext  =  oLi.nextElementSibling || oLi.nextSibling;
上一个兄弟：
    obj.previousSibling
        在高级浏览器下，会找到文本节点 
    obj.previouseElementSibling
    兼容性：var oPrev = oLi.previousElementSibling || oLi.previousSibling;

首节点：
    1) oParent.firstChild
    oParent.firstElementChild
    兼容性： var oFirst = oParent.fristElementChild || oParent.firstChild;
    
    2)oParent.children[0];
尾节点：
    1)
        oParent.lastChild
        oParent.lastElementChild
        兼容性： var oLast = oParent.lastElementChild || oParent.lastChild;
    2)oParent.children[oParent.children.length -1];

*文本节点：空格 换行 文字

        创建元素
              document.createElement('标签名');
       动态创建的元素和原来就存在的元素，没有任何区别
        添加元素
        document.body.appendChild(obj);
              父.appendChild(obj);
       添加到父元素的最后面 
       添加前面：
             父.insertBefore(obj,谁的前面);
       删除元素 
            父.removeChild(obj);
       appendChild:    类似剪切的功能
       insertBefore:    类似剪切的功能

右下角悬浮框：
可视区： 你能看见的区域
物体的top = 可视区的高度 - 物体的高度 + 滚动的距离
可视区高度：
document.documentElement.clientHeight
可视区的宽度：
document.documentElement.clientWidth

物体的高度:
        heigth          offsetHeight
        自己的高度           盒模型高度
        height      height+padding+border
类型  string      number
none    100px       0
    
    盒模型高度：offsetHeight
    盒模型宽度：offsetWidth
滚动的距离:
    高度：
        document.body.scrollTop
            兼容：只兼容 Chrome， 在其它浏览器下是 0
        
        document.documentElement.scrollTop
            兼容： FF  ie全系列
        
        解决兼容：
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

滚动条滚动事件：window.onscroll
窗口改变大小事件： window.onresize

物体：
offsetWidth
offsetHeight
距离左边： offsetLeft
距离上边： offsetTop

父级：     定位父级        结构上的父级
            offsetParent       parentNode
//返回一个物体真正距离 （左，上）
function getPos(obj){ 
        var l = 0;
        var t = 0;
        while(obj){
            l += obj.offsetLeft;
            t += obj.offsetTop; 
            obj = obj.offsetParent; 
        }
        return {left:l,top:t}; 
    }

BOM：

 打开窗口：
    window.open('网址'[,'打开方式']);
        Chrome: 拦截
        FF:     阻止 
        IE:     直接打开
    如果是用户行为，方式就统一了，都能打开。
    打开方式：
        _blank  在新的窗口打开 （默认方式）
        _self       在自己的窗口打开

    返回值 ：
        返回的是新开的那个窗口的window对象
    可以做在线执行代码。

关闭窗口：
    window.close();
        Chrome: 直接关闭
        FF:     没反应
        IE:     给个一友好的提示，询问是否关闭
    如果是自己打开的，是可以正常关闭。
地址栏信息：
    window.location

    window.location.href    地址
    window.location.search  数据
    window.location.hash    锚点

    其它：
    一个完整的网址：
        http://域名:端口/路径/1.html?a=1&b=2#abc

    域名： window.location.hostname
    协议： window.location.protocol
    端口： window.location.port
    路径： window.location.pathname

    不仅可以获取信息，还可以赋值

历史记录：
    window.history

window.history.forward();//前进
window.history.back();//后退
window.history.go(数字); //去第几个