DOM 版本
w3c 指定的DOM规范包括多个版本，不同的版本（或称知为级别）又包含不同的子规法和模块，不同浏览器对DOM的支持是千变万化的。
DOM 0级
在DOM的W3C规范还没有制定之前的所有江湖版本的统称，主要包括IE和Netscape两个不同的版本。
DOM 1级
1998年10月，w3c 推出了DOM 1.0版本的规范。 这个规法主要是包括两个子规范。 -DOM Core（核心部分）：把XML文档设计为树形节点结构，并为这种结构的运行机制定制了一套规法化标准，同时定义了创建、编辑、操作这些文档结构的方法以及属性。 -DOM HTML：针对HTML文档、标签集合、以及与个别HTML标签相关的元素定义了对象、属性和方法。
DOM 2级
2000年1月，w3c正式发布更新后的DOM核心部分，并且在这次发布添加了一些新的规范，这次发布的DOM称为2级规范。2003年1月，w3c又正式发布了对DOM HTML子规范的修订，添加了针对HTML 4.01和XHTML 1.0版本文档中的很多对象、属性和方法。这次发布就叫做DOM2.0的推荐版本。 DOM 2.0 Core：添加了更多的特性，如针对命名空间的方法等。 DOM 2.0 HTML：针对HTML的文档结构模型，并添加了一些属性。 DOM 2.0 Event：规定了与鼠标相关的事件和控制机制，但是不包括键盘相关事件和处理部分。 DOM 2.0 Style：提供了访问和操作所有与css相关的样式以及规则的能力。 DOM 2.0 Traversal and DOM 2.0 Range：允许开发人员通过迭代方式访问DOM，以便根据需要对文档进行遍历或者其他的操作。 DOM 2.0 Views：提供了访问和更新文档的表现的能力。 DOM 2.0规法已经是目前各大浏览器主持的主流标准。但是对ie的支持并不完善。
DOM 3级
2014年4月，w3c发布了DOM3.0版本。 DOM 3.0 Core：添加了更多新的方法和新属性。同时也修改了已有的一些方法。 DOM 3.0 Load and Save：提供将XML文档的内容加载到DOM文档中和将DOM文档序列化为XML的文档能力。 DOM 3.0 Validation：提供了确保动态生成的文档的有效性的能力，即如何符合文档类型声明。
DOM 4级
2015年11月，w3c发布了DOM4.0版本。这是目前最新的DOM规范版本。
前世已成追忆，还是来关心关心今生的DOM，那些对于前端开发者来说经常用到且必需要掌握的DOM API吧！
从概念上来说，MDN上这样描述：文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。
稍拗口，这也不是写作文凑字数。
那么，简言之：DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删改查网页内容）。
严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。
DOM 与 NODE节点相似度很高，NODE API常用的有以下几大类型：节点创建型API；页面修改型API；节点查询型API；节点关系型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+
后代元素
假设祖先节点 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的增删改查：
创建元素
document.createElement('div');
在元素前/后插入元素
假设我要在 id=1 的 div 后面插入一个 id=1.1 的新 div 元素：
document.getElementById('1')
.insertAdjacentHTML('afterend', '');
假设我希望在 id=1 的 div 前面插入一个 id=0.9 的新 div 元素：
document.getElementById('1')
.insertAdjacentHTML('beforebegin', '');
作为子元素插入
现在我希望在 parent 容器的第一个子元素之前插入一个新的 div 元素:
document.getElementById('parent')
.insertAdjacentHTML('afterbegin', '');
如果在第一个子元素的后面插入那个 div 元素：
document.getElementById('parent')
.insertAdjacentHTML('beforeend', '');
移动元素
在这里希望把 #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变成这样：
当然我还可以把刚刚加上的Class删除掉：
document.getElementById('foo').className =
document.getElementById('foo').className.replace(/^bold$/, '');
添加/删除/修改元素属性
我们希望在 div 元素上设定 role="button" 来让它能够充当一个 button：
document.getElementById('foo').setAttribute('role', 'button');
现在再把这个 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';
稍显冗长…
如果不需要考虑浏览器支持限制，据说可以把
'document.querySelectorAll'和'document.getElementById'定义一个函数，那么代码会不会稍微精简一点呢？不过作为初学者，把每个API都一遍遍敲出来，以后才会减小出现拼写bug的机率嘛，还是少想点投机取巧的事好了。
每天敲键盘，生活真愉快！
只可惜最近腰君不见了，它逃到哪里去了…囧…