DOM文档对象模型

一、DOM简介

1、DOM是文档对象模型(Document Object Model)，由W3C组织提出的标准。
2、DOM是一种XML文档的解析标准。
3、原理：将html文档看成一颗节点树，然后使用dom提供的APl对对应的节点进行增删改查。
4、利用DOM可以让JavaScript对网页中的元素进行控制，实现动态网页的功能。
5、DOM是关于如何获取、修改、添加或删除HTML元素的标准。

二、DOM节点类型

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

1、整个文档是一个文档节点 —— document节点：代表整个文档，也代表根节点。
2、每个HTML元素是元素节点 —— Element：元素节点
3、HTML元素内的文本是文本节点 —— Text：文本节点每个
4、HTML属性是属性节点 —— Attr：属性节点
5、注释是注释节点 —— Comment：注释节点

三、查看节点

document：整个文档
docum.body：返回body节点
childNodes：查看子节点
hasChildNodes：是否有子节点
firstChild / firstElementChild
lastChild / lastElementChild

四、节点的类型与属性

节点有三个属性：

1、nodeName

文档节点值为#document
元素节点name为标签名（大写）
文本节点name为#text
属性节点name为属性名
注释节点name为#comment

2、nodeType

  类型					nodeType值
元素节点						1
属性节点						2
文本节点						3
注释节点						8
文档节点						9

3、nodeValue

文本节点的nodevalue就是文本内容
注释节点的nodeValue就是注释内容
元素节点的nodeValue就是null
属性节点的nodeValue就是属性值

五、获取节点的四种方法（重点）

1、getElementByld(id)

通过元素ID取得节点
兼容所有浏览器，推荐使用。
id和别的元素的name不能相同，这是IE的存在的问题

2、getElementsByClassName (class)

通过元素的class取得节点集合
注意：哪怕页面只有唯一一个名为myclass的元素，也会返回一个集合（数组）

3、getElementsByTagName(TagName)

返回指定元素的称的元素节点集合
getElementByTagName(*)能得到所有元素节点集合

4、getElementsByName(name)

按name属性值获取元素节点集合
getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

拓展：document.querySelector(“css选择器”)

六、新建、添加、删除和替换

1、新建

createElement(name)-创建元素节点
createTextNode(text)-创建文本节点
createAttribute(name)-创建属性节点
createCommnt(text)-创建注释节点
createDocumentFragment()-创建文档碎片节点，提高效率

2、添加（重点）

appendChild()：指定节点的最后一个子节点列表之后，添加一个新的子节点

注：appendChild如果添加的是html页面上已经存在的元素，相当于是移动。配合cloneNode(true)使用实现复制。

3、删除

removeChild(node)-删除子节点

4、替换

replaceChild(newNode,oldNode)-替换子节点

5、插入

insertBefore(newNode,oldNode)-插入到指定位置

6、复制

cloneNode(是否包含子节点)-复制节点(函数事件时讲)

如果传递给它的参数是true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

七、文本节点的操作方法

元素节点.firstChild-获取文本节点
textNode.length-获取文本节点长度
textNode.data="..."-设置文本内容
appendData(string)-添加文本
deleteData(offset,count)-删除指定位置和长度的文本
linsertData(offset,string)-在指定位置插入文本
replaceData(offset,count,string)-替换指定位置和长度的文本

八、属性节点的操作

1、getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

说明：
1、elementNode：使用getElementByld()、getElementsByTagName()等方法，获取到的元素节点。
2、name：要想查询的元素节点的属性名字

2、setAttribute()方法

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value)

说明：
1、name：要设置的属性名。
2、value：要设置的属性值。

注意：
1、把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2、类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

上面两种方式均可以使用：html元素节点.属性名 实现。
(attributes：获取属性节点的集合，它是一个属性)

九、innerHTML与innerText；outerHTML与outerText（重点）

innerHTML：返回节点里的所有内容，并且可以识别HTML标签
innerText：返回节点里的文本，并且不能识别标签
直接使用这两属性表示，获取属性值。如果使用 = 号，表示对它进行设置

outerHTML，outerText(它包括自己)

十、DOM操作元素的样式

1、使用style属性（只能获取内联样式属性值）

特点：可读，可写，只能操作内联模式
语法：HTML元素.style.样式属性 = "值";
注：如果样式属性名称中有带有"-"号，去掉"-"，并且首字母大写

2.获取内部样式和外部样式(只是获取,不能设置)

1)、currentStyle对象（只限于IE）

语法：HTML元素.currentStyle.样式属性;

2)、DOM提供了getComputedStyle()方法（IE不支持，Firefox支持）

语法：document.defaultView.getComputedStyle(元素，null).属性;

注：第二个参数表示伪元素，如:hover

另：getComputedStyle可以发现有两种调用方式，如下：
window.getComputedStyle()与document.defaultView.getComputedStyle()
两种方式，有什么区别，我们应该如何使用：具说是，在FireFox3.6上不使用defaultView方法就搞不定的，本人没有进行测试。不过jquery框架里可以是使用的defaultView的方式，所以，写defaultView方式，应该是兼容性更好吧。所以，最好还是使用document.defaultView.getComputedStyle()的方式来获取样式。

3)、使用className属性：可设置或返回元素的class样式

语法： HTML元素.className = "样式名称";

为第2点中的第1)、2)点方式写的兼容性代代码：

function getStyle(htmlElement,styleProperty,value){
	if(document.currentStyle){
		htmlElement.currentStyle[styleProperty] = value;
	}else{
		document.defaultView.geSomputedStyle(htmlElement,null)[styleProperty] = value;
	}
}