DOM基礎

1. DOM獲取節點

　　1)經過childNodes獲取子節點
　　　　屬性：childNodes nodeType
　　　　若是子節點中有文本節點,會同時返回文本節點。這時須要搭配nodeType，才能濾掉文本節點,只返回元素節點。

　　2)經過children獲取子節點
　　　　屬性：children
　　　　只會返回全部的元素節點,不會返回文本節點。

　　　　何謂文本節點？
　　　　文本節點: 沒有任何標籤包含的字符串或空串。

　　3)獲取父節點
　　　　屬性：parentNode

　　4)獲取相對定位的父節點
　　　　屬性：offsetParent

　　5)獲取首尾子節點
　　　　獲取首個子節點：firstChild、firstElementChild
　　　　獲取末尾子節點：lastChild 、lastElementChild

　　　　注：firstChild和lastChild有兼容性問題,建議使用firstElementChild 和 lastElementChild。

　　6)獲取兄弟節點
　　　　獲取後一個兄弟節點：nextSibling、nextElementSibling
　　　　獲取前一個兄弟節點：previousSibling、previousElementSibling

　　　　注：nextSibling和previousSibling有兼容性問題,建議使用nextElementSibling 和 previousElementSibling。

2. 操縱DOM元素屬性

　　第一種：oDiv.style.display="block";

　　第二種：oDiv.style["display"]="block";

　　第三種：Dom方式
　　　　獲取：getAttribute(名稱)
　　　　設置：setAttribute(名稱, 值)
　　　　刪除：removeAttribute(名稱)

3. DOM元素的建立、插入、刪除

　　1)建立DOM元素
　　　　createElement(標籤名) 　　　　　　　　　　　　 建立一個節點

　　2)插入DOM元素
　　　　appendChild(節點) 追加一個節點
　　　　insertBefore(節點, 原有節點) 　　　　　　　　　  在已有元素前插入

　　3)刪除DOM元素
　　　　removeChild(節點) 刪除一個節點

4. 文檔碎片(不多使用)

　　1)建立文檔碎片
　　　　document.createDocumentFragment() 　　2)說明 　　　　若是須要添加多個節點,能夠先建立一個文檔碎片，先將要添加的節點保存到文檔碎片中， 　　　　再將文檔碎片添加到指定位置。 　　　　智能社老師的比喻：文檔碎片比如是膠囊的外殼，吃到肚子裏這層外殼會自動融化。 　　　　文檔碎片被添加到父元素下以後，也會自動消失，只留下那些原本就要添加的節點。