一.概念

DOM（Document Object Model）的縮寫，即文檔對象模型
DOM是針對HTML和XML文檔的一個API。
DOM描繪了一個層次化的節(jié)點(diǎn)樹，即HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)(node)。
DOM樹中的所有節(jié)點(diǎn)均可通過JS進(jìn)行訪問，允許開發(fā)人員添加.移除.修改和查詢頁面的某一部分

二.DOM

1.節(jié)點(diǎn)類型

1.1.文檔節(jié)點(diǎn)

整個文檔是一個'文檔節(jié)點(diǎn)'

1.2.元素節(jié)點(diǎn)

每一個HTML元素是'元素節(jié)點(diǎn)'

1.3.文本節(jié)點(diǎn)

HTML元素內(nèi)的文本是'文本節(jié)點(diǎn)'(回車也是文本節(jié)點(diǎn))

1.4.屬性節(jié)點(diǎn)

每個HTML的屬性是'屬性節(jié)點(diǎn)'

1.5.注釋節(jié)點(diǎn)

注釋是'注釋節(jié)點(diǎn)'

2.nodeType屬性

返回一個整數(shù)，這個數(shù)值代表節(jié)點(diǎn)的類型
1.元素節(jié)點(diǎn) 返回1
2.屬性節(jié)點(diǎn) 返回2
3.文本節(jié)點(diǎn) 返回3
4.注釋節(jié)點(diǎn) 返回8
5.文檔節(jié)點(diǎn) 返回9

3.nodeName屬性

返回節(jié)點(diǎn)的名稱
1.元素節(jié)點(diǎn) 返回 標(biāo)簽名稱(大寫)
2.屬性節(jié)點(diǎn) 返回 屬性名稱
3.文本節(jié)點(diǎn) 返回 永遠(yuǎn)都是 #text
4.注釋節(jié)點(diǎn) 返回 永遠(yuǎn)都是 #comment
5.文檔節(jié)點(diǎn) 返回 永遠(yuǎn)都是 #document

4.tagName屬性

返回元素的標(biāo)簽名
在HTML中，tagName屬性的返回值始終是大寫的

5.nodeValue屬性

返回節(jié)點(diǎn)的值
1.元素節(jié)點(diǎn) 返回 undefined或者null
2.文本節(jié)點(diǎn) 返回 文本內(nèi)容
3.屬性節(jié)點(diǎn) 返回 屬性值
4.注釋節(jié)點(diǎn) 返回 注釋內(nèi)容
5.文檔節(jié)點(diǎn) 返回 null
注：對于元素節(jié)點(diǎn)，用innerHTML/innerText/value設(shè)置或取值

6.節(jié)點(diǎn)關(guān)系

節(jié)點(diǎn)之間的關(guān)系，通常用家庭中的輩分關(guān)系來描述

• parentNode:父節(jié)點(diǎn)
• children:所有元素子節(jié)點(diǎn)
• childNodes:所有子節(jié)點(diǎn)，ie678與高版本瀏覽器返回值不一樣
• nextSibling:下一個兄弟節(jié)點(diǎn)
• previousSibling: 上一個兄弟節(jié)點(diǎn)
• firstChild:第一個子節(jié)點(diǎn)
  -lastChild:最后一個子節(jié)點(diǎn)

   屬性1                              屬性2                               描述
nextSibling                 nextElementSibling 不兼容IE678           下一個兄弟節(jié)點(diǎn)
previousSibling             previousElementSibling 不兼容IE678       上一個兄弟節(jié)點(diǎn)
firstChild                  firstElementChild 不兼容IE678            第一個子節(jié)點(diǎn)
lastChild                   lastElementChild 不兼容IE678             最后一個子節(jié)點(diǎn)

7.節(jié)點(diǎn)方法

DocumentFragment

documentFragment是一個文檔碎片，是一種‘輕量級節(jié)點(diǎn)’，是一個虛擬的節(jié)點(diǎn)對象
documentFragment的nodeType值為11，nodeName的值為f#document-fragment
通常作為倉庫來使用，不存在DOM樹上，將多個需要插入的新節(jié)點(diǎn)放在文檔碎片上，再插入文檔中可以優(yōu)化DOM操作

 var Fragment=document.createDocumentFragment();  //創(chuàng)建一個文檔碎片

8.獲取元素樣式

行間樣式和非行間樣式

8.1行間樣式：

<div class="box2" style="width: 200px;height: 100px;background:blue;"></div>
console.log( box1.style.width );

8.2非行間樣式：

css:
.box1{
    width: 100px;
    height: 100px;
    background: red;
}
html:
<div class="box1"></div>
console.log( box2.style.width );

8.3getComputedStyle獲取樣式(不兼容IE678)
getComputedStyle(對象,參數(shù)).樣式
第一個參數(shù)是元素對象
第二個參數(shù)可以是任何數(shù)據(jù),通常寫為null或false

eg:
    getComputedStyle(box1,null).width;

注：currentStyle：IE678獲取樣式的方法
如：obj.currentStyle.樣式
兼容性處理：

function getStyle(dom,attr){
    if (dom.currentStyle) {//IE
        return dom.currentStyle[attr];
    } else {
        return getComputedStyle(dom,null)[attr];
    }
}

9.offset/client系列屬性

獲取滾動條高度一般使用如下方式:
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;