前端的一些常用DOM和事件归纳

1、document.getElementById(id); document.getElementByTagName(tagName); 
      document.getElementsByName(name);在IE8以下不兼容获取不到div、span、非name标准元素属性，建议不用
      document.getElementsByClassName(className) 在IE8以下不兼容;

2、element.parentNode --element.nextSibling--element.previousSibling;
3、element.childNodes ;
3、element.children;
4、document.createElement()方法创建元素节点;
5、document.createTextNode()方法创建文本节点;
6、parentElement.appendChild(newChild)添加节点;   
7、parentNode.insertBefore(newNode,otherChlidNode)方法插入子节点;
8、parentNode.replaceChild(newNode,oldNode)替换子节点;
9、cloneNode(bool)方法复制节点，bool==true的话包括属性样式子节点全部复制;
10、parentNode.removeChild(childNode)删除子节点; parentNode.childNodes[]ff和ie会把空格算进去;
11、element.firstChild 等价 element.children[0];
12、element.lastChild  等价 element.children[element.children.length-1];

13、nodeName属性获得节点名称;
14、 nodeType返回节点的类型：元素节点返回1 、属性节点返回2 、文本节点返回3 ;
15、nodeValue返回节点的值：元素节点返回null 、属性节点返回undefined 、文本节点返回文本内容 ;
16、hasChildNodes()判断是否有子节点;
17、tagName属性返回元素的标记名称 ;这个属性只有元素节点才有，等价于nodeName属性;
18、setAttribute("属性名","值");
19、getAttribute()方法获得属性值 ;
i20、nnerHTML和innerText属性,ie还是ff会把空格、换行、制表符等当成文本节点;  通过判断遍历用nodeType来获取类型用正则/s/匹配，21、去掉空格parentNode.removeChild(node);
22、表格： table.insertRow(i)插入行; i-行的位置
                   row.insertCell(i)插入单元格;  

                   table.rows.cells单元格操作;
                   table.deleteRow(index); 删除行

                   row.deleteCell(index);  删除单元格
23、Event对象创建判断，IE、chrome为window.event,FF中需要把事件对象通过形参传入到函数中；
       ie中阻止默认事件：returnValue = false;阻止冒泡：event.cancelBubble = true;
       FF中 阻止默认事件：oEvent.preventDefault(); 阻止冒泡：oEvent.stopPropagation();

在DOM二级标准中，为某个元素注册事件处理函数用addEventListener()，移除用removeEventListener()，这两个方法都有三个参数，第一       个是事件名称，第二个是处理函数(句柄)，第三个是一个布尔值，true表示指定的事件处理函数在捕获阶段执行，false表示在冒泡阶段执行.
       obj.addEventListener(sEventName,fn,bool);移除事件:removeEventListener(sEventName,fn,bool)；
在IE中，没有事件捕获阶段，只支持冒泡；注册事件处理函数用attachEvent()，移除用detachEvent()，它们有两个参数：事件名和处理函数(句柄) obj.attachEvent ("on"+ sEventName, fn); obj.detachEvent ("on"+ sEventName, fn)或者sEventName.replace(/^on/i, '');正则替换掉;

一般处理兼容为了防止冒泡和默认事件采用匿名函数里判断调用函数是否return false：
 function(fn){obj.addEventListener(sEventName,function(){if(false==fn.call(obj,ev){ev.cancelBubble=true;ev.preventDefault();}},bool);}
 function(fn){obj.attachEvent(on+ sEventName,function(){if(false==fn.call(obj,ev){ev.cancelBubble=true;return false;}}; }

     在IE中绑定同一个事件，会先执行后绑定的事件，这一点要特别注意;
在IE中event对象有srcElement(获取事件对象的DOM元素)属性，但是没有target属性；FF下，even对象有target属性，但是没有srcElement属性.
事件的属性：X-top(left)
type-事件类型;
shiftKey,ctrlKey,altKey,metaKey(DOM):是否按下了Shift,Ctrl,Alt,Meta键;按下时，值为 TRUE ，否则为 FALSE ,只读。 
键盘事件:
keydown：按下键盘任意键触发，按住不放会重复触发;
keypress：按下键盘任意字符键时触发，按住不放会重复触发 ;
keyup：释放键盘上的按键时触发;
当按一下键盘上字符键时，会依次触发kedown、keypress、keyup  
鼠标：button:0-未按下键;1-按左键;2-按右键;右击事件oncontextmenu;
keyCode(IE中),e.which(OP),charCode(DOM):键对应的代码; 其中截屏键是没有代码的

 screenX：IE和FF下通用，表示相对于屏幕的坐标；
 clientX：IE和FF下通用，表示相对于页面可视区域坐标；

 pageX：FF特有，表示相对于网页页面的坐标，它与clientX的区别在于它加上了滚动条的偏移量。

 layerX：FF特有，表示鼠标相对于触发事件的元素的（包括padding但不包括border）开始的坐标，不管元素是否定义了position；

 offsetX：IE特有，表示鼠标相对于触发事件的元素的 （包括padding但不包括border）开始的坐标，不管元素是否定义了position；相当于FF下的layerX；

x：IE特有，与clientX作用相同。
offsetLeft(top)：该DOM对象的层级关系中离该对象最近的、设置了position的父对象（一直向上级找）”中的位置，该对象可以用offsetParent属性得到，如找不到设置了position的父对象则以body为参照，ie6下以HTML为参照。其值为offsetLeft=marginLeft+Left。 
offsetWidth(height)=padding+width(height)+border+scrollbar;
clientWidth=padding+width；
scrollWidth：当内容宽小于对象宽时，scrollWidth=clientWidth；当内容宽大于对象宽时，此时设置对象的overflow:hidden，则scrollWidth的值为内容的实际宽，如果对象设置的padding，则FF下scrollWidth=内容宽+padding值，而IE6下scrollWidth=内容宽+padding值*2，所以建议不设padding。
若对象未设置width属性，则scrollWidth即为其内容的宽度。
scrollLeft：内容偏移对象左边的距离。可以总结出：scrollLeft的最大值=scrollWidth-clientWidth。 
document.documentElement.clientHeight(width); 

 document.documentElement.scrollTop和document.body.scrollTop，这二者的区别主要在于documentType的申请，简单的说是在带<!DOCTYPE ..>标签的页面里document.body.scrollTop的结果是0，而在没有申请<!DOCTYPE ..> 的页面里document.documentElement.scrollTop为0。
24、aJax对象：
DOM中IE7以上创建：new XMLHttpRequest(); 
IE6中创建：new ActiveXobject("microsoft.XMLHTTP") ;

oAjax.open(method, url, true);第一个参数：发送方式post/get，post无法使用缓存文件，第二个参数：url地址，第三个参数true-异步false-同步

oAjax.send(str);str参数仅用于 POST 请求
 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定您希望发送的数据：
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); oAjax.send("fname=xiao&lname=tang"); 
oAjax.onreadystatechange抓取数据动态，
 readyState属性值：0: 请求未初始1: 服务器连接已建2: 请求已接3: 请求处理4: 请求已完成，且响应已就绪 ；
status属性值：404: 未找到页面，200 完成；

 oAjax.readyState==4 && oAjax.status==200 获取成功调用函数，把返回的字符串或xml对象数据作为参数传进函数里：fn(oAjax.responseText/responseXML)，responseXML为XML对象需要解析，responseXML.getElementsByTagName("title").children来获取所有DOM标签对象，再用遍历把数据解析出来，若返回的数据是JSON，可以通过eval("(JSON)")直接转为对象,最好用()强制符包裹JSON对象，否则有的浏览器会把JSON当成标签声明来解析，因为浏览器会认为这是个复合语句，在浏览器中，复合语句优先，对象次之。

当请求方式为false同步时，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止，不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可 。
oAjax.open("GET","gethint.php?q="+str,true); 通过传递一个变量str从而可以实现onkeyup鼠标抬起事件创建AJAX对象或其它事件实时与后台沟通交互增强用户体验
25、 IE下获取样式：obj.currentStyle[styleName];
        FF中：getComputedStyle(obj,false) [styleName];
26、DOM操作中对象的left和right、top与bottom不能同时存在，必须将另一个设为null