DOM的理解
1. 什么是DOM?
"DOM是一套对文档的内容进行抽象和概念化的方法。"
"DOM定义了访问HTML和XML文档的接口"
"文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。"
"文档对象模型（DOM）是HTML和XML文档的编程接口。"
"W3C文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。"
W3C DOM标准被分为3个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型
2. DOM怎么用
在HTML DOM中，所有的事物都是节点。DOM被视为节点树。
DOM节点：
整个文档是一个文档节点
整个HTML元素是元素节点
HTML内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
DOM Tree
通过DOM中提供的方法可以操控DOM树，使我们对文档的内容、结构、样式进行修改。
3. DOM 和 JavaScript关系
DOM不是一种编程语言，但如果没有DOM，JavaScript语言不会有任何网页。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
通过JavaScript，您可以重构整个HTML项目，您可以添加、移除、改变或者重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。JavaScript主要是利用HTML DOM去获得、改变、创建HTML元素，从未达到美化页面、操作页面的目的。因此，在JavaScript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外，JavaScript有自己的对象，如数组。
4. DOM 的API
创建型API：
主要包括createElement、createTextNode、cloneNode和createDocumentFragment四个方法。
页面修改型API:
appendChild、insertBefore、removeChild、replaceChild
节点查询型API:
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
节点关系型API:
parentNode: Element的父节点可能是Element、Document、DocumentFragment
parentElement: 与parentNode的区别在于，其父节点必须是一个Element，如果不是，返回null
previousSibling: 节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
previousElementSibling: 返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
nextSibling: 节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
nextElementSibling: 返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持
子关系型API:
childNodes、children、firstChild、lastChild、hasChildNodes等
元素属性型API：
setAttribute、getAttribute
元素样式型API：
window.getComputedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度而是通过其内容将其高度撑开，这时候要获取它的高度就要用到getComputedStyle。getBoundingClientReact是用来返回元素的大小以及相对浏览器可视窗口的位置。
5. DOM的加载
浏览器地址栏输入URL地址，浏览器开始加载页面时，有以下几个过程：
1. 浏览器开始解析HTML文档
2. 浏览器遇到HTML中的<script>与<link>时暂停解析，开始执行脚本和CSS样式（非异步加载的情况）
3. HTML文档解析完成
4. 浏览器等待图片、样式表、字体文件等外部资源加载完成
在jQuery中有ready方法，它在页面HTML文档解析完成但图片等媒体加载完成前执行。
$(document).ready(function(){ // alert('all done enjoy!'); })
这个jQuery ready()的方法就是DOM Ready。
传统DOM的加载：
//传统DOM加载 window.onload= function() { var box = document.getElementById("box"); alert(box.innerHTML); }; //如果有图片，需要等到图片加载完毕才执行onload里面的内容
非IE浏览器提供了一种加载事件：DOMContentLoadeds事件，这个事件可以在完成HTML DOM结构之后就触发，不会等图像音频、JS文件、CSS文件或其他资源是否已经下载完毕。
//DOMContentLoaded事件加载 if (document.addEventListener) { //DOM结构加载完毕 addEvent(document, 'DOMContentLoaded', function () { var box = document.getElementById('box'); alert(box.innerHTML); }); }
IE8不支持DOMContentLoaded事件，因此在较低的版本中，可以使用readystatechange事件，可以达到同样的效果。
document.onreadystatechange = function() { if(document.readyState == "complete") { //logical code alert("OK, all done enjoy!"); } }
document.readyState共有三种可能的值：
loading: 加载HTML代码阶段
interactive: 加载外部资源阶段
complete: 加载完成
