全稱：Document Object Model 文檔對象模型

DOM會把文檔看做是一個樹狀結(jié)構(gòu)，同時定義了很多方法，來操作這個樹
每一個標簽都是一個節(jié)點(標簽 即 元素 即 節(jié)點)
**不僅僅只有標簽才算節(jié)點，也有文本節(jié)點
    text文本節(jié)點   =>   空格 換行 回車
已知一個節(jié)點,能找到任何一個節(jié)點
    oUl.nodeType  =>   object   

一、節(jié)點查找操作(類似CSS選擇器)

1、元素.nodeType;   
        只讀屬性   當前節(jié)點類型
        DOM節(jié)點類型有多種  12種(W3C)定義
            元素.nodeType;
                1) 元素節(jié)點  <==>   1  
                2) 屬性節(jié)點  <==>   2
                3) 文本節(jié)點  <==>   3
2、元素.Attributes;   
        只讀屬性        屬性列表集合
3、元素.childNodes;  
        只讀屬性
        子節(jié)點列表集合(只包含以及子節(jié)點，不包含后輩孫級以下節(jié)點)
            標準下：   包含了文本和元素類型的節(jié)點，也會包換非法嵌套的子節(jié)點
            非標準下： 只包含元素類型節(jié)點，IE7下不會包含非法嵌套子節(jié)點
        oUl.childNodes.length
            是一個類數(shù)組對象，當只有一個子節(jié)點，其length = undefined,當子節(jié)點大于1時，其長度有數(shù)值
4、父級.children;  
        只讀屬性 子節(jié)點列表集合 
        只能獲取兒子級節(jié)點，不能獲取孫子級節(jié)點 
        標準下：   只包含元素類型節(jié)點
        非標準下： 只包含元素類型節(jié)點
5、 元素.firstChild;
        只讀屬性   元素下的第一個子節(jié)點(首節(jié)點)
        標準下：   firstChild會包含文本類型節(jié)點
        非標準下： 只包含元素節(jié)點
        元素.firstElementChild;  只讀屬性  標準瀏覽器下獲取第一個元素類型節(jié)點(非標準下不識別會彈出undefined)
        兼容處理：
            var first=obj.firstElementChild || obj.firstChild;
        沒有子級點bug
6、 元素.lastChild;  
        最后一個子節(jié)點(尾節(jié)點)    
        var last=obj.lastElementChild || obj.lastChild;
7、 兄弟節(jié)點
        下一個兄弟節(jié)點
            obj.nextSibling;    
                1)在chorme FF ie9+ 下獲取的是元素節(jié)點+文本節(jié)點(text)
                2)在IE8  IE7 下只獲取元素節(jié)點
            obj.nextElementSibling
                1)在chrome FF ie9+ 下只獲取元素節(jié)點
                2)在IE8  IE7 下 undefined
                3)當沒有下一個"元素"兄弟節(jié)點，會找文本節(jié)點，若沒有文本節(jié)點則會是null(但不會報錯)
            做兼容：
                var next=obj.nextElementSibling || obj.nextSibling;
        上一個兄弟節(jié)點
            var prev=obj.previousElementSibling || obj.previousSibling;     
8、元素.parentNode;  
        只讀屬性  當前節(jié)點的父級節(jié)點(親生父親)
        只能獲取父級節(jié)點，不能獲取爺爺級節(jié)點，且只有一個父級節(jié)點
9、元素.offsetParent;
        只讀屬性  距離當前元素最近的一個有定位屬性的父節(jié)點(找干爹)
        a. 若沒有定位父級，默認是body
        b. IE7以下，當前元素沒有定位，offsetParent默認是body，若有定位則是html
        c. IE7以下，如果當前元素的某個父級觸發(fā)了layout，那么offsetParent就會被指向到這個觸發(fā)了layout特性的父節(jié)點上
            01、zoom:1;   觸發(fā)layout
            02、document.getELementById('div1').currentStyle.haslayout;  =>  true:觸發(fā); false:未觸發(fā)

二、節(jié)點增刪改操作

1、document.createElement('標簽名');
        動態(tài)創(chuàng)建元素
        document.createElement('li');
2、 把創(chuàng)建的元素添加到頁面中
        1) 父級.appendChild(要添加的元素);
                方法  追加子元素(在后面添加)
                oUl.appendChild(oLi);
        2) 父級.insertBefore(添加的元素,添加的位置);
                方法  在指定元素前面插入一個新元素
        注意：
            1. 在IE下如果第二個參數(shù)的節(jié)點，不存在會報錯
            2. 在其他瀏覽器下，如果第二個參數(shù)的節(jié)點不存在，則會以appendChild形式進行添加
    **appendChild insertBefore類似于剪切
3、 父級.removeChild(要刪除的元素);
        刪除元素
        oUl.removeChild(this.parentNode);
4、 父級.replaceChild(新節(jié)點,被替換的節(jié)點);
        替換元素
        document.replaceChild(oDiv,oP);
注意：
    appendChild , insertBefore , replaceChild , 都可以操作動態(tài)創(chuàng)建出來的節(jié)點，也可操作已有節(jié)點 
上移下移
    1)上移 添加到上一個的前面
    2)下移 添加到下一個的下一個的前面  

三、元素的屬性操作（Attribute）

1、元素.getAttribute(屬性名稱);              方法   獲取指定元素指定屬性
    oTxt.getAttributes('value');
2、元素.setAttribute(屬性名稱，屬性值);        方法   給指定元素指定屬性設值
    oTxt.setAttribute('value','hello');
3、元素.removeAttribute(屬性名稱);            方法   移除指定元素指定屬性
    oTxt.removeAttribute('value');
注意：
    1.用‘.’和‘[]’的形式無法操作元素的自定義屬性，getAttribute可操作元素的自定義屬性
    2.可以獲取元素屬性實際的值，IE7以下還是會返回資源的絕對路徑

四、窗口的尺寸和大小

可視區(qū)尺寸
    document.documentElement.clientWidth;
    document.document.Element.clientHeight;
滾動距離
    document.body.scrollTop
    document.body.scrollLeft        
        Chrome 認為滾動條(scroll)是body的
        FF、IE都不好使

    document.documentElement.scrollTop;
    document.documentElement.scrollLeft;
    兼容
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
內(nèi)容高度
    例：瀑布流中UL的高度
    document.body.scrollHeight;
文檔高度：
    document.body.offsetHeight;

    document.documentElement.offsetHeight;    =>    IE為可視高
物體高度
    1) getStyle(obj,name);
        a. 高度    生效后的高度
        b. 類型  字符串
        c. display:none;     后依然是生效后的高度
    2) obj.offsetHeight;
        a.  高度   盒子模型的高度
        b.  類型   number
        c.  display:none;    后顯示為0

五、元素的距離

1、元素.offsetLeft;     只讀屬性   當前元素到定位父級的距離(偏移值)，到當前 元素.offsetParent的距離
   元素.offsetTop;
   沒有定位父級
        offsetParent      =>     body/IE7  ->  html
        offsetLeft        =>     html(margin)
    有定位父級
        IE以下
            如果自己沒定位： offsetTOP[Left]    ->   到body距離
            如果自己有定位： 那么就是到定位父級的距離
        其他
            到定位父級的距離
2、區(qū)別
    style.width:   樣式寬(100px，有單位)
    clientWidth:   可視區(qū)寬(樣式寬+padding   沒單位)
    offsetWidth:   占位寬(樣式寬+padding+border   可視區(qū)寬+邊框)