DOM：Document Object Model（文檔對象模型)由三部分組成
? ??Core DOM：也稱核心的DOM，定義了一套標準的針對任何結構化文檔的對象?，包括XML，HTML，XHTML
? ? XML DOM：定義了一套標準的針對XML文檔的對象
? ? HTML DOM：定義了一套標準的針對HTML文檔的對象
一、節點的訪問（ var? a=document.getElementBy~~() 可以獲取一個或多個指定元素節點）
? ? 2、（1）節點.nodeName 獲取節點名稱，注意并不是節點的name屬性值：例如 <input> 此節點獲取的節點名稱是 INPUT，文本節點獲取的是“#text”。
? ? ? ? ? (2) 節點.nodeValue 獲取節點的值，一般來說是獲取世俗性節點或者文本節點的值
? ? ? ? （3) 節點.nodeType 獲取節點的類型，參考下表
3、操作節點屬性 節點.getAttribute("屬性名")
? ? ? ? ? ? ? ? ? ? ? ? ? 節點.setAttribute("屬性名","屬性值")
? ? ? ? ? ? 注意：對于div來說高度height并不是他的屬性，style才是div的屬性
4、創建插入節點
5、刪除替換節點
注意：cloneNode(deep)中deep為boolean類型為可選項。該方法將復制并返回調用它的節點的副本。如果傳遞給它的參數是 true，它還將遞歸復制當前節點的所有子孫節點。否則，它只復制當前節點。
舉例： var delNode=document.getElementById("first");? ? ? ? ? ? 獲取節點 delnode
????????????delNode.parentNode.removeChild(delNode);? ? ? ? ? ? ? ? ?刪除節點?delnode
????????????var oldNode=document.getElementById("second");? 獲取舊節點?oldNode
????????????var newNode=document.createElement("img");? ? ? ?獲取新節點?newNode
????????????newNode.setAttribute("src","images/f03.jpg");? ? ? ? ? ?設置新節點的屬性
????????????oldNode.parentNode.replaceChild(newNode,oldNode); 新節點替換舊節點
解釋：無論在刪除還是替換舊節點需要先獲取上級節點所以需要? ?節點.parentNode 來獲上級節點
6.操作節點樣式
? ? ? ? document.get~~.style.屬性/事件/
? ? 例如：document.getElementById("aa").style.color="red"; id為”aa“的節點的字體顏色為紅色
? ? ? ? ? ? ? ?document.getElementById("aa").onclick=eat();??id為”aa“的節點的點擊事件為 ss() 事件
7.獲取元素位置：
獲取元素樣式： 1.document.defaultView.getComputedStyle(元素,null).屬性;
? ? ? ? ? ? ? ? ? ?例：document.defaultView.getComputedStyle(a,null).display
? ? ? ? ? ? ? ? ? ? ? ? ?2.HTML元素. currentStyle.樣式屬性; 兼容IE
? ? ? ? ? ? ? ? ? ?例：document.getElementById("aa").currentStyle.height
? ? ? ? ? ? ? ? ? ? ? ? ?3.HTML元素.style.樣式屬性
? ? ? ? ? ? ? ? ? ? 例：document.getElementById("aa").style
注意獲取的值需要轉換為數值類型才能使用?
8.補充內容 ：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
獲取當前頁面滾動條縱坐標的位置：document.body.scrollTop與document.documentElement.scrollTop
|獲取當前頁面滾動條橫坐標的位置：document.body.scrollLeft與document.documentElement.scrollLeft
9.關于offset~~和style.top等的區別
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：
一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。(這里的style.top是讀的css樣式中的top:20px;這種形式的值,所以是帶有"px"的)
二、offsetTop 只讀，而 style.top 可讀寫。(style.top賦值切記加上"px",測試過發現IE下用數值是可以的,但其它主流chrome,opera,ff,safari都不能識別,所以必須加"px")
三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也都是類似區別。
