一、DOM概念
1、DOM：Document Object Model 文档对象模型
(1) 文档：html页面；
(2) 文档对象：页面中的元素；
(3) 文档对象模型：代表的是一套准则、标准，是WC3组织定义的；为了能够让程序（js）去操作页面中的元素，定义出来的一套标准
2、DMO定义：
DOM为了能够更方便的定义和操作页面中的元素，首先会把当前整个页面看作成一个竖状结构，也就是说DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵树中的每一个元素，我们称之为DOM节点
二、DOM的节点类型 （总共有12种）
1、最常用的是：元素节点：返回1
属性节点：返回2
文本节点：返回3
2、元素.nodeType：只读属性
作用：可以获得当前元素的节点类型
alert(元素.nodeType)
三、属性
（一）获取父级下的子节点
1、元素.childNodes 只读属性 子节点列表的集合
兼容：标准下：包含了文本和元素类型的节点，并且也会包含非法嵌套的子节点；
非标准下：只包含元素类型的节点，IE7以下不会包含非法嵌套子节点；
需要注意的是：childNodes只包含一级子节点，不包含后辈孙级以下的节点
alert(元素.childNodes[0].nodeType); // 通过nodeType可以查看当前元素的节点类型
2、元素.children：只读属性 子节点列表的集合
a : 标准下和非标准下：只包含元素类型的节点
b : 用法与childNodes相同，只是说childNodes是存在兼容问题的
3、元素.attributes：只读属性 属性列表集合
alert(元素.attributes.length); // 元素属性的个数
alert(元素.attributes[0]); // object attr 属性对象
alert(元素.attributes[0].name); // 获得当前属性的名称
alert(元素.attributes[0].value); // 获得当前属性的值
alert(元素.attributes[0].nodeType); // 可以通过nodeType查看节点类型：属性节点 返回2
（二）获取元素的子节点： （用法都是一样的）
1、获取元素下第一个子节点
(1) 元素.firstChild：只读属性 （非标准下获取第一个元素类型的子节点）
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
(2) 元素.firstElementChild：只读属性 （标准下获取第一个元素类型的子节点）
标准下：包含元素节点
非标准下：undefined
(3) 想要做到兼容，可以这样写：
var oFirst = oUl.firstElementChild || oUl.firstChild;
(4) 想要获取元素的第一个子节点，可以用children[0]的方法找到第一个元素
2、获取元素的最后一个子节点：
(1) 元素.lastChild
(2) 元素.lastElementChild
(3) 想要做到兼容，可以这样写：
var oLast = oUl.lastElementChild || oUl.lastChild;
3、获取元素的下一个兄弟节点：
(1)元素.nextSibling
(2)元素.nextElementSibling
4、获取元素的上一个兄弟节点：
(1)元素.previousSibling
(2)元素.previousElementSibling
（三）获取父节点
1、元素.parentNode: 只读属性，父节点，只有一个，没有兼容问题
2、元素.offsetParent: 只读属性，离当前元素最近的一个有定位属性的父节点
需注意的问题：
(1)如果没有定位父级，默认指向body。 （ offsetParent —> body ）
(2)IE7以下，如果当前元素没有定位默认指向body，有定位则指向的是html
实例：
#div3{background:red;position:relative;} // 当前元素设置了定位
alert(oDiv3.offsetParent.tagName); // 当前oDiv3在css样式中设置了定位，那么在JS中offsetParent就会指向html
(3)IE7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
3、offsetLeft、offsetTop
元素.offsetLeft[top]：只读属性，当前元素到定位父级（offsetParent）的距离（也叫偏移值）。
需注意的问题：
(1) 如果没有定位父级：
offsetLeft —> html
(2) 如果有定位父级：
IE7以下： 如果当前元素也有定位，那么就是到定位父级的距离，如果当前元素没有定位，那么就是到body的距离（要想得到兼容，当前元素必须有定位）
其他浏览器： 到定位父级的距离
4、width、height 取值
(1) style.width：样式宽
(2) clientWidth：可视区宽（样式宽+padding）
(3) offsetWidth：占位宽（可视区宽+边框）
四、DOM方法
（一）操作特性的DOM方法
1、元素.getAttribute(属性名称)； 获取指定元素的指定属性的值
需要注意的是：
alert(oImg.getAttribute('src')); // 在ie7下获取图片的src还是会返回资源的绝对路径，而标准浏览器返回的是相对路径
2、元素.setAttribute(属性名称)； 给指定元素指定的属性设置值，两个参数
实例：
oText.setAttribute( 'value', 'hello' ); // 给value属性设置了'hello'值
3、元素.removeAttribute(属性名称)； 移除指定元素的指定的属性
（二）创建元素
父级.createElement(要创建元素的标签名)
（三）操作动态创建出来的节点
1、添加到页面中：
(1) 父级.appendChild(); 追加子元素
(2) 父级.insertBefore(新的元素,被插入的元素); 在指定元素前面插入一个新元素
实例：
oUl.insertBefore(oLi,oUl.children[0]);
存在问题：
a：在ie下如果第二个参数的节点不存在，会报错；
b：在其他标准浏览器下，如果第二个参数的节点不存在，则会以appendChild的形式进行添加
解决方案：
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]); }else{ oUl.appendChild(oLi); }2、替换子节点
父级.replaceChild(新节点,被替换节点)
3、删除元素
父级.removeChild(要删除的元素);
五、操作表格的属性和方法
tHead：表格头
tBodies：表格正文
tFoot：表格尾
rows：行
cells：列
六、表单操作
1、可以根据name的值选中当前的表单元素：（每一个表单元素都有name这个属性）
2、onchange事件 当值发生改变的时候触发
(1) 格式：oForm.text1.onchange = function (){ }; // text1 是 name 的值
(2) input表单：
text(文本框)：当光标离开的时候如果有内容就会触发；
radio/checkbox：标准下点击的时候只要值变了，那么就会触发；
非标准下焦点离开的时候如果值变了，就会触发；
select：只要选中下拉选项就会触发
3、表单事件
(1) onsubmit: 事件 当提交表单的时候触发
(2) onreset： 事件 当提交表单重置的时候触发