1.背景介紹
DOM（文檔對象模型）是針對HTML 和XML 文檔的一個API（應用程序編程接口）。DOM描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。DOM脫胎于
Netscape 及微軟公司創始的DHTML（動態HTML），但現在它已經成為表現和操作頁面標記的真正的跨平臺、語言中立的方式。1998 年10 月DOM１級規范成為W3C 的推薦標準，為基本的文檔結構及查詢提供了接口。本章主要討論與瀏覽器中的HTML頁面相關的DOM1級的特性和應用，以及JavaScript 對DOM1級的實現。IE、Firefox、Safari、Chrome 和Opera 都非常完善地實現了DOM。
2.知識剖析
什么是DOM
DOM 是 Document Object Model（文檔對象模型）的縮寫。DOM是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。在 HTML DOM中，所有事物都是節點。DOM 是被視為節點樹的 HTML。DOM節點HTML 文檔中的所有內容都是節點。整個文檔是一個文檔節點,每個 HTML 元素是元素節點，HTML 元素內的文本是文本節點，每個 HTML 屬性是屬性節點，注釋是注釋節點。
DOM常用操作
查找節點
新建節點
添加節點
刪除節點
修改節點
我們用到最多的是element類型，用于表現HTML元素，提供了對元素標簽名、子節點及特性的訪問。
DOM常用操作舉例
查找節點
document.getElementById('id屬性值');返回擁有指定id的第一個對象的引用 ? ? ? ? ? document/element.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
新建節點
document.createElement('元素名');創建新的元素節點
document.createAttribute('屬性名');創建新的屬性節點
document.createTextNode('文本內容');創建新的文本節點
document.createComment('注釋節點');創建新的注釋節點
document.createDocumentFragment( );創建文檔片段節點
添加節點
常用來添加文本節點element.innerHTML='新增文本內容'
創建文本節點
創建文本節點
function addText(){
var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本內容'; //插入文本內容
}
刪除節點
parentNode.removeChild( existingChild );刪除已有的子節點，返回值為刪除節點
element.removeAttribute('屬性名');刪除具有指定屬性名稱的屬性，無返回值
element.removeAttributeNode( attrNode );刪除指定屬性，返回值為刪除的屬性
修改節點
添加屬性節點，修改屬性值：
element.setAttribute( attributeName, attributeValue );
屬性節點
增添id屬性，并修改class屬性值
var element = document.getElementsByTagName('p')[0];
// 添加屬性節點
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);
// 修改屬性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);
DOM事件
允許 JavaScript 對 HTML 事件作出反應
onclick 事件——當用戶點擊時
onload 事件——用戶進入
onunload 事件——用戶離開
onmouseover事件——鼠標移入
onmouseout事件——鼠標移出
onmousedown事件——鼠標按下
onmouseup 事件——鼠標抬起
3.常見問題
如何通過class和tag調用元素?如何對其設置屬性？
4.解決方案
一個頁面中常常有多個class相同的元素，也有多個標簽相同的元素，在調用時方法如下
div2
document.getElementsByClassName("time")[0].innerHTML = "16:43";
document.getElementsByClassName("time")[1].innerHTML = "16:44";
document.getElementsByTagName("div")[0].className = "text-time";
6.擴展思考
Html5添加了輔助管理DOM焦點的功能。首先就是document.activeElement屬性，這個屬性始終會引用DOM中當前獲得了焦點的元素。另外就是新增了document.hasFocus()方法，這個方法用于確定文檔是否獲得了焦點。
7.參考文獻
參考一：《JavaScript高級程序設計》
參考二：http://blog.csdn.net/ouyangyanlan/article/details/50217065" target="_blank" ? ? ?DOM樹知識點梳理
8.更多討論
怎樣在一個元素節點之前加入新的節點？
insertBefore(參數1，參數2)：在指定位置添加節點
classlist和classname的區別？
classlist為了解決classname一刀切的問題而誕生，類似于jquery的選擇器，但明顯不如jquery方便簡潔，無視就好
如何查找兄弟節點？
Query對象返回，children()則只會返回節點
jQuery.prev()，返回上一個兄弟節點，不是所有的兄弟節點
jQuery.prevAll()，返回所有之前的兄弟節點
jQuery.next(),返回下一個兄弟節點，不是所有的兄弟節點
jQuery.nextAll()，返回所有之后的兄弟節點
jQuery.siblings(),返回兄弟姐妹節點，不分前后
getelementsbyclassname獲取的是什么，有何特點？
獲取的是類似數組類的對象，可以理解成元素的數組，但是不能像數組一樣push，確切的說是個偽數組，它只支持length屬性。
