DOM 概述 document object model 文件物件模型：處理網頁內容的方法和介面 1. 什麼是DOM和節點 - document是文件物件模型的一部分。 - DOM是一個複合的資料型別。 - DOM樹：由節點（Node）組成 - HTML的組成部分為節點（ Node ）
- 解析過程：HTML載入完畢，渲染引擎會在記憶體中把HTML文件，生成一個DOM樹，getElementById是獲取記憶體中DOM上的元素。然後操作的時候修改的是該元素的屬性。
- DOM的資料結構（樹狀）：
    
- 在HTML當中一切都是節點： 整個文件就是一個文件節點 每一個HMTL標籤都是一個元素節點

（標籤） 標籤中的文字則是文位元組點（文字） 標籤的屬性是屬性節點（屬性） - DOM就是html文件的模型抽象。資料以樹的形式在記憶體中排列。 節點就是DOM的組成。是一個物件，有屬性和方法。獲取方式有很多種。 節點分為元素節點（標籤），文字節點，屬性節點。 區分方法：nodeType: 1是標籤,2是屬性,3是文字,8是註釋 2. 獲取節點 ① 直接獲取 - 通過id獲取元素節點，返回值為標籤，可以直接使用，只有document能呼叫

document.getElementById("box");

- 通過標籤名獲取元素節點,返回值為陣列,習慣性是遍歷之後再使用

document.getElementsByTagName("div");
 

- 通過class屬性獲取元素節點,返回值為陣列,習慣性是遍歷之後再使用,ie678不支援

document.getElementsByClassName("box");

② 訪問關係獲取 節點的訪問關係，是以屬性的方式存在的。 DOM的節點並不是孤立的，因此可以通過DOM節點之間的相對關係對它們進行訪問。 a. 父節點   - parentNode

節點.parentNode

b. 兄弟節點   - nextSibling：呼叫者是節點。IE678中指下一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是下一個節點（包括空文件和換行節點）。 - nextElementSibling

：在火狐谷歌IE9都指的是下一個元素節點。 總結：在IE678中用nextSibling，在火狐谷歌IE9+以後用nextElementSibling

下一個兄弟節點=節點.nextElementSibling || 節點.nextSibling

- previousSibling：呼叫者是節點。IE678中指前一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是前一個節點（包括空文件和換行節點）。 - previousElementSibling：在火狐谷歌IE9都指的是前一個元素節點。 總結：在IE678中用previousSibling，在火狐谷歌IE9+以後用previousElementSibling

前一個兄弟節點=節點.previousElementSibling|| 節點.previousSibling

c. 單個子節點 - firstChild：呼叫者是父節點。IE678中指第一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是第一個節點（包括空文件和換行節點）。 - firstElementChild：在火狐谷歌IE9都指的第一個元素節點。

第一個子節點=父節點.firstElementChild || 父節點.firstChild

- lastChild：呼叫者是父節點。IE678中指最後一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是最後一個節點（包括空文件和換行節點）。 - lastElementChild：在火狐谷歌IE9都指的最後一個元素節點。

最後一個子節點=父節點.lastElementChild || 父節點.lastChild

d. 所有子節點 - childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文字節點   （他還是W3C的親兒子 ） 火狐 谷歌等高本版會把換行也看做是子節點       nodeType  ==  1  表示是元素節點 (元素就是標籤)       nodeType  ==  2  表示是屬性節點         nodeType  ==  3 表示是文字節點   

子節點陣列 = 父節點.childNodes; //獲取所有節點

- children：非標準屬性，它返回指定元素的子元素集合，但只返回HTML節點，甚至不返回文字節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支援。 children在IE6/7/8中包含註釋節點  在IE678中，註釋節點不要寫在裡面。

子節點陣列 = 父節點.children; //用的最多

- 要重點明白兩個屬性：parentNode 和 children - 節點的訪問關係都是屬性。節點的操作都是函式或者方法。 ③ 獲取 title、body、head、html 標籤 document.title --- 文件標題； document.head --- 文件的頭標籤 document.body --- 文件的body標籤； document.documentElement --- 這個很重要 它表示文件的html標籤， 也就是說，基本結構當中的html標籤並不是通過document.html 去訪問的，而是document.documentElement 。 3. 節點操作(都是函式或者方法) （標籤的建立、新增、刪除、複製） ① 節點的建立

document.write(""); //可以建立新的標籤，容易覆蓋原有程式碼

innerHTML //這個屬性可以識別標籤（缺點：老標籤中的事件會被覆蓋，因為字串的不可變性，需要用+=）

document.createElement("li");

②節點的新增

父節點.appendChild(新節點);
父節點.insertBefore(新節點,參考節點); //父節點呼叫方法，把新節點放入參考節點之前。若參考元素為null，在最後新增。

③ 節點的刪除

父節點.removeChild(子節點); //通過父節點，刪除子節點

④ 節點的複製

節點.cloneNode(bool); //複製節點，不寫引數預設為false，false是淺層複製，true是深層複製

4. 屬性操作 獲取：getAttribute(名稱) 設定：setAttribute(名稱, 值) 刪除：removeAttribute(名稱) - 注意：IE6、7不支援。 - 呼叫者：節點。    - 有引數。    - 沒有返回值。 - 每一個方法意義不同。