js DOM

DOM:文档对象模型（Document Object Model）,它是js操作HTML文档的接口，使文档变得非常优雅。

DOM最大的特点是将文档变成节点树；

nodeType

nodeType属性可以显示节点的具体类型；

nodeType值	节点类型
1	元素节点
3	文字节点
8	注释节点
9	document节点
10	DTD节点

访问元素节点

访问元素节点就是得到、获取页面上的元素节点。主要依靠document对象；

几乎所有的DOM功能都封装在document对象中，document对象也代表整个HTML文档，它是节点树的根；

访问元素节点常用的方法

方法	功能	兼容性
document.getElementById()	通过ID得到元素	IE6
document.getElementsByTagName()	通过标签名得到元素数组	IE6
document.getElementsByClassName	通过类名得到元素数组	IE9
document.querySelector()	通过选择器得到元素	IE8部分兼容 IE9完全兼容
document.querySelectorAll()	通过选择器得到元素数组	IE8部分兼容 IE9完全兼容

getElementById

如果页面上有相同的id元素，则只能得到第一个。

延迟运行

在测试DOM代码时，通常JS代码要放在html节点后，否则js无法找到html节点

可以使用window.onload = function(){}事件，使页面加载完毕后再执行指定代码。

getElementsByTagName()

数组方便遍历，可以批量操控元素节点。

任何一个节点元素也可以调用该方法，从而得到其内部的某种类元素节点。

getElementsByClassName()

该方法从IE9开始兼容

任何一个节点元素也可以调用该方法，从而得到其内部的某类名的元素节点。

querySelector()

它只能得到页面上的一个元素，有多个符合条件的元素，它只能获取第一个；

从IE8开始兼容，但是从IE9开始支持css3选择器。

节点的关系

子节点对于父节点来说叫：ChildNodes；第一个子节点叫firstChild；最后一个子节点叫：lastChild

父节点对于子节点来说叫：parentNode；

子节点的前一个兄弟节点叫：previousSibling

子节点的后一个兄弟节点叫：nextSibling

注意文本节点也属于节点；在标准的W3C规范中，空白文本节点也算作节点。但是在IE8以前具有兼容性问题。

排除文本节点的干扰

关系	考虑所有节点	只考虑元素节点
子节点	childNodes	children
父节点	parentNode	parentNode
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
前一个兄弟节点	previousSibling	previousElementSibling
后一个兄弟节点	nextSibling	nextElementSibling

改变元素节点的内容

1、innerHTML，它可以以HTML语法来设置元素节点内的内容

2、innerText，只能以纯文本的形式设置节点的内容

改变元素节点的CSS样式

比如：box.style.backgroundColor='red';

css属性要写成驼峰形式；css属性值要设置完整形式；要写单位；

改变元素节点的HTML属性

标准的W3C属性,比如src、href，直接用打点进行更改；

oImg.src='images/2.jpg';

不符合W3C标准的属性，用setAttribute()和getAttribute()来设置、读取；

节点的创建、移除、克隆

创建

document.createElement()方法来创建一个指定tagname的html元素；

var oDiv = document.createElement('div');

新创建的节点是“孤儿节点”，它并没有被挂载到DOM树上。

必须使用appenChild()或insertBefore()方法将孤儿节点挂载到DOM树上

appendChild()

任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂在到它的内部，成为它最后一个子节点；

父节点.appendChild(孤儿节点);

insertBefore()

任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂在到它的内部，成为它成为标杆节点的前一个子节点；

父节点.insertBefore(孤儿节点，标杆节点);

移动节点

如果将已经挂载到DOM的节点成为appendChild()或者insertBefore()的参数。这个节点将会被移动。这意味着一个节点不能同时位于DOM树的两个位置。

删除节点

removeChild()方法从DOM树上删除一个子节点；节点不能自己删除自己，只能父节点删除。

克隆节点

cloneNode()方法可以克隆节点，克隆出的节点是孤儿节点。

参数是一个布尔值，表示是否采用深度克隆，如果采用可克隆该节点及其内部的后代节点；否则就只克隆该节点本身；