DOM是针对xml并经过扩展应用于html的应用程序编程接口，前端工程师借助DOM并使用前端脚本语言来拥有对页面内容及结构的控制权。
- DOM可以将任何html或xml文档描绘成一个“多层节点结构”。
- DOM对象中拥有许多不同类型的节点，这些节点都继承自Node类型，因此所有节点都共享着相同的属性和方法。
【节点的共有属性及方法】
-
属性：nodeType，该属性表明节点的类型。
<p id="p">我是一个段落</p>
var node=document.getElementById('p');
alert(node.nodeType)//1
alert(node.childNodes[0].nodeType)//3
alert(node.ownerDocument.nodeType)//9
这是一个例子，nodeType的值是从1~12的数字，分别表示各种不同的类型，例子中，node是<p>他是一个元素节点，nodeType=1；他的子节点是文本节点，nodeType=3；它属于的文档是一个文档节点，nodeType=9；
还有很多节点类型，只是我没咋看见，所以先不写了。 -
属性：childNodes，该属性保存着一个NodeList对象，它是一种类 数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
var n1=node.childNodes[0];
var n2=node.childNodes.item(1);
var length=node.childNodes.length;
发现该属性的表现形式类似数组，但他并不是Array的实例。但是我们可以将它转化为数组。参考arguments对象如何转化为数组 - 属性：parentNode，该属性指向文档树中的父节点。
- 属性：previousSibling,该属性表示该节点的前一个兄弟节点。如果该节点为第一个兄弟节点，那么该属性值为null。
- 属性：nextSibling,该属性表示该节点的后一个兄弟节点。如果该节点为最后一个兄弟节点，那么该属性值为null。
- 属性：firstChild，该属性表示该节点的第一个子节点。
- 属性：lastChild，该属性表示该节点的最后一个子节点。
- 属性：owerDocument，该属性表示整个文档的文档节点。
- 方法：hasChildNodes()，该方法在节点包含一个或多个子节点时返回true。
-
方法：appendChild()，该方法用于向列表的末尾添加一个节点。
node.appendChild(newnode); -
方法：insertBefore()，该方法用于在指定节点之前插入一个节点。下面这个例子是在空节点之前插入，也就是放在最后咯。
node.appendChild(newnode,null); -
方法：replaceChild()，该方法是要替换某个节点，所以接受两个参数，第一个是新节点，第二个是被替换的节点。
node.replaceChild(newnode,node.childNodes[0]) -
方法：removeChild()，这个方法只有一个参数就是要移除的参数。
node.removeChild(node.childNodes[0]); -
方法：cloneNode()，用于为调用这个方法的节点创建一个副本，接受两个参数，true：表示深度复制，及复制节点及其整个子节点树。false：执行浅复制，只复制节点本身。
var newnode=node.childNodes[0].cloneNode(true);
node.appendChild(newnode); - 方法：normalize()，作用时连接该节点内的两个文本节点之间的空白。
【需要注意】新增、插入、替换、移除节点都是针对父节点的方法。父节点应用这些方法来调整子节点。
【Document类型】
文档节点是每个文档的根节点，节点即对象，文档节点及document对象是HTMLDocument的一个实例，是window对象的一个属性，所以可将其作为全局对象来访问。
-
该对象的属性：
alert(document.nodeType);//9
alert(document.nodeName);//#document
alert(document.nodeValue);//null
其余呢，没有父节点，所以为null，没有所属文档，本身就是一个文档，存在子节点。 -
子节点
var body=document.body;
var html=document.documentElement;
另外还有文档类型节点，注释节点，也都可能是document的子节点，但是由于浏览器之间差异性太大，也没什么用，我就不多深理解啦。 -
文档信息
- title:包含着,<title>元素中的文本
document.title='test'; - 与网页请求有关的三个属性：url domain referrer
- url属性包含页面完整的url（即地址栏中显示的url）
- domain属性中只包含页面的域名
- referer属性是来源页面的URL，可能会包含空字符串
- title:包含着,<title>元素中的文本
这三个属性，只有domain是可以设置的，但不能给domain设置任何值。只有domain值一样的页面，才可以互相访问对方包含的js对象。
所有这些请求都包含在请求的http头部，只不过是通过这些属性，让我们能够访问他们而已。
-
查找元素
- 方法一：接受一个取得元素的id
var node=document.getElementById('a');
【注意】
1、IE8及较低版本不区分大小写，所a与A会被认为是一样的，但是其他浏览器都会区分。
2、IE7及较低版本会有一个怪癖：当（input、textarea、button、select）的name属性与给定参数id的值一样时，且前者在真正的id前面时，会被取代。 - 方法二：要取得元素的标签名
var nodes=document.getElementsByTagName('p');
这个方法会返回一个HTMLCollection对象，作为一个动态集合，该对象与nodelist对象很相似，可以用.item(index)、[index]来访问集合中的元素。
但是HTMLCollection对象有自己的方法，.namedItem(string)、[string]利用名字来访问集合中的某一个元素。 - 方法三：要取得元素的name
var radios= document.getElementsByName('color')；
这个也会返回一个HTMLCollection对象。
- 方法一：接受一个取得元素的id
