DOM应用

1、DOM基础

DOM实际指的就是document,关于DOM的兼容性，有以下概述：

IE10%Chrome60%FF99%

2、DOM节点

childNodes   获取子节点，包括文本节点和元素节点，空格也会计算为节点，但在IE6-8下则为子节点个数，不包括空格，childNodes没有背景颜色。

nodeType    节点类型，若果nodeType == 1，则是元素节点，适合所有浏览器的兼容写法如下：

[html] view plain copy

1. for(var i=0;i<oUl.childNodes.length;i++){  
2.     if(oUl.childNodes[i].nodeType == 1) {  
3.         oUl.childNodes[i].style.background="red"  
4.      }  
5. }  

children 获取子节点，只包括元素，不包括文本，

parentNode 获取父节点，

offsetParent 获取元素在页面上的实际位置，

firstChild  获取第一个元素节点，但是存在兼容性问题，可以使用如下方法解决：

if(oUl.firstChild) {       //ie6-8兼容        oUl.firstChild.style.background="red"    }else {        //高级浏览器下         oUl.firstElementChild.style.background="green"  }

3、操纵元素属性

设置元素：setAttribute(名称，值)

获取元素：getAttribute(名称)

删除：removeAttribute(名称)

4、用className选择元素，封装出来的函数如下：

function getClassName(oParent,sClass) {              var aResult = [];              var aEle = oParent.getElementsByTagName('*');              for(var i=0;i<aEle.length;i++){                  if(aEle[i].className == sClass) {                      aResult.push(aEle[i])                  }              }              return aResult;          }

当使用函数时，则可以写成：

var aBox =getClassName(oUl,'box');

此时，aBox则是一个数组。

5、创建、插入和删除元素

a、创建元素：creatElement

b、父级.appendChild(子节点)   追加元素，在父节点调用，追加到末尾

c、父级.insertBefore(子节点，再谁之前) 都是向父节点插入

d、父级.removeChild(子节点)  删除元素

6、文档碎片

a、文档碎片可以提高DOM操作性能

b、document.creatDocumentFragment(),在ie6/ie7能提高加载性能

var oFrag = document.createDocumentFragment();

7、表格应用

tBodies  == getElementByTagName('tbody')

rows == getElementByTagName('tr')
cells == getElementByTagName('td')

tHead、tFoot等等同，tHead和tFoot是一个元素不是一个数组