DOM总结

一、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： 事件  当提交表单重置的时候触发