DOM 版本
w3c 指定的DOM規(guī)范包括多個版本啊犬，不同的版本（或稱知為級別）又包含不同的子規(guī)法和模塊，不同瀏覽器對DOM的支持是千變萬化的墓懂。
DOM 0級
在DOM的W3C規(guī)范還沒有制定之前的所有江湖版本的統(tǒng)稱朱浴，主要包括IE和Netscape兩個不同的版本蒿讥。
DOM 1級
1998年10月，w3c 推出了DOM 1.0版本的規(guī)范友绝。 這個規(guī)法主要是包括兩個子規(guī)范堤尾。 -DOM Core（核心部分）：把XML文檔設計為樹形節(jié)點結構，并為這種結構的運行機制定制了一套規(guī)法化標準迁客，同時定義了創(chuàng)建郭宝、編輯、操作這些文檔結構的方法以及屬性掷漱。 -DOM HTML：針對HTML文檔粘室、標簽集合、以及與個別HTML標簽相關的元素定義了對象卜范、屬性和方法育特。
DOM 2級
2000年1月，w3c正式發(fā)布更新后的DOM核心部分先朦，并且在這次發(fā)布添加了一些新的規(guī)范缰冤，這次發(fā)布的DOM稱為2級規(guī)范。2003年1月喳魏，w3c又正式發(fā)布了對DOM HTML子規(guī)范的修訂棉浸，添加了針對HTML 4.01和XHTML 1.0版本文檔中的很多對象、屬性和方法刺彩。這次發(fā)布就叫做DOM2.0的推薦版本迷郑。 DOM 2.0 Core：添加了更多的特性枝恋，如針對命名空間的方法等。 DOM 2.0 HTML：針對HTML的文檔結構模型嗡害，并添加了一些屬性焚碌。 DOM 2.0 Event：規(guī)定了與鼠標相關的事件和控制機制，但是不包括鍵盤相關事件和處理部分霸妹。 DOM 2.0 Style：提供了訪問和操作所有與css相關的樣式以及規(guī)則的能力十电。 DOM 2.0 Traversal and DOM 2.0 Range：允許開發(fā)人員通過迭代方式訪問DOM，以便根據(jù)需要對文檔進行遍歷或者其他的操作叹螟。 DOM 2.0 Views：提供了訪問和更新文檔的表現(xiàn)的能力鹃骂。 DOM 2.0規(guī)法已經是目前各大瀏覽器主持的主流標準。但是對ie的支持并不完善罢绽。
DOM 3級
2014年4月畏线，w3c發(fā)布了DOM3.0版本。 DOM 3.0 Core：添加了更多新的方法和新屬性良价。同時也修改了已有的一些方法寝殴。 DOM 3.0 Load and Save：提供將XML文檔的內容加載到DOM文檔中和將DOM文檔序列化為XML的文檔能力。 DOM 3.0 Validation：提供了確保動態(tài)生成的文檔的有效性的能力明垢，即如何符合文檔類型聲明杯矩。
DOM 4級
2015年11月，w3c發(fā)布了DOM4.0版本袖外。這是目前最新的DOM規(guī)范版本史隆。
前世已成追憶，還是來關心關心今生的DOM曼验，那些對于前端開發(fā)者來說經常用到且必需要掌握的DOM API吧泌射！
從概念上來說，MDN上這樣描述：文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口鬓照。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問熔酷，以改變文檔的結構，樣式和內容豺裆。 DOM 提供了一種表述形式— 將文檔作為一個結構化的節(jié)點組以及包含屬性和方法的對象拒秘。從本質上說，它將 web 頁面和腳本或編程語言連接起來了臭猜。
稍拗口躺酒，這也不是寫作文湊字數(shù)。
那么蔑歌，簡言之：DOM是JavaScript操作網頁的接口羹应，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個JavaScript對象次屠，從而可以用腳本進行各種操作（比如增刪改查網頁內容）园匹。
嚴格地說雳刺，DOM不屬于JavaScript，但是操作DOM是JavaScript最常見的任務裸违，而JavaScript也是最常用于DOM操作的語言掖桦。
DOM 與 NODE節(jié)點相似度很高，NODE API常用的有以下幾大類型：節(jié)點創(chuàng)建型API供汛；頁面修改型API枪汪；節(jié)點查詢型API；節(jié)點關系型API紊馏；兄弟關系型API料饥；子關系型API蒲犬；元素屬性型API朱监；元素樣式型API≡＃可以考慮抽時間再把NODE API列出來赫编，以免傻傻分不清。然后再寫一篇博客對比理一下思路奋隶，這篇文章主要記錄了DOM API的元素選擇類型擂送，以及DOM增刪改查的API常用情況。
DOM API獲取元素的方法：
ID
document.getElementById('myElement'); // IE5.5+
document.querySelector('#myElement'); // IE8+
CSS Classes
document.getElementsByClassName('myElement'); // IE9+
document.querySelectorAll('.myElement'); // IE8+
HTML 標簽名
document.getElementsByTagName('div'); // IE5.5+
document.querySelectorAll('div'); // IE8+
HTML 屬性
document.querySelectorAll('[data-foo-bar="someval"]'); // IE8+
偽類
假設我要從 id=myForm 的 from 元素中選擇具備 :invalid 偽類的元素：
document.querySelectorAll('#myForm :invalid'); // IE8+
子元素
假設父元素 id="myParent" 唯欣，如果我只是想簡單的選擇所有子元素：
document.getElementById('myParent').childNodes;
document.getElementById('myParent').children;// IE 9+
如果只是想獲取包含 ng-click 屬性的直接子元素:
document.querySelector('#myParent > [ng-click]');// IE8+
后代元素
假設祖先節(jié)點 id="myParent"嘹吨，我希望獲取其后代的所有超鏈接：
document.querySelectorAll('#myParent A'); // IE8+
排除元素
假設我要從 div 元素中獲取出不帶“ignore” class的元素:
document.querySelectorAll('DIV:not(.ignore)'); // IE9+
多重選擇
假設我要選擇所有的 div , a 和 script 元素：
document.querySelectorAll('DIV, A, SCRIPT'); // IE8+
以下是DOM API的增刪改查：
創(chuàng)建元素
document.createElement('div');
在元素前/后插入元素
假設我要在 id=1 的 div 后面插入一個 id=1.1 的新 div 元素：
document.getElementById('1')
.insertAdjacentHTML('afterend', '<div id="1.1"></div>');
假設我希望在 id=1 的 div 前面插入一個 id=0.9 的新 div 元素：
document.getElementById('1')
.insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');
作為子元素插入
現(xiàn)在我希望在 parent 容器的第一個子元素之前插入一個新的 div 元素:
document.getElementById('parent')
.insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');
如果在第一個子元素的后面插入那個 div 元素：
document.getElementById('parent')
.insertAdjacentHTML('beforeend', '<div id="newChild"></div>');
移動元素
在這里希望把 #orphan 移動到 parent 容器中作為最后一個元素:
document.getElementById('parent')
.appendChild(document.getElementById('orphan'));
如果我希望把 #orphan 移動到 parent 容器的第一個元素:
document.getElementById('parent')
.insertBefore(document.getElementById('orphan'), document.getElementById('c1'));
刪除元素
document.getElementById('foobar')
.parentNode.removeChild(document.getElementById('foobar'));
添加/刪除 CSS Classes
我希望給id="foo"加入名為 bold 的CSS Class：
document.getElementById('foo').className += 'bold';
然后DOM變成這樣：
<div id="foo" class="bold"></div>
當然我還可以把剛剛加上的Class刪除掉：
document.getElementById('foo').className =
document.getElementById('foo').className.replace(/^bold$/, '');
添加/刪除/修改元素屬性
<div id="foo"></div>
我們希望在 div 元素上設定 role="button" 來讓它能夠充當一個 button：
document.getElementById('foo').setAttribute('role', 'button');
現(xiàn)在再把這個 role 刪除掉:
document.getElementById('foo').removeAttribute('role');
添加/修改內容
// IE 5.5+
document.getElementById('div').innerHTML = 'Goodbye!';
// IE 5.5+ but NOT Firefox
document.getElementById('div').innerText = 'GoodBye!';
// IE 9+
document.getElementById('div').textContent = 'Goodbye!';
添加/修改 Style
document.getElementById('div').style.fontWeight = 'bold';
稍顯冗長…
如果不需要考慮瀏覽器支持限制，據(jù)說可以把
'document.querySelectorAll'和'document.getElementById'定義一個函數(shù)境氢，那么代碼會不會稍微精簡一點呢蟀拷？不過作為初學者，把每個API都一遍遍敲出來萍聊，以后才會減小出現(xiàn)拼寫bug的機率嘛问芬，還是少想點投機取巧的事好了。
每天敲鍵盤寿桨，生活真愉快此衅！
只可惜最近腰君不見了，它逃到哪里去了…囧…
