常见浏览器原生javascript兼容性问题主要分为以下几类:
一、Dom
1、获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以Id来获取元素;
document.getElementsByTagName(“tag”)[0]以标签名来获取元素。另外IE不支持document.getElementsByClassName("class");
2、获取Form表单元素
只兼容IE:document.formname.itemname
兼容所有:document.forms[“formName”].elements[“itemname”] 或 document.forms[i].elements[“itemname”]
3、设置CSS
只兼容FireFox:obj.setAttribute(style,color:green)
兼容所有:document.getElementById("banana").className 和document.getElementById("banana").style.color
4、获取CSS
获取内嵌样式均可用style来获取,对于获取内部样式和外联样式表中的样式,不同浏览器差异如下
只兼容IE:currentStyle
标准浏览器中:getComputedStyle
5、设置宽高
只兼容IE:obj.style.height = imgObj.height
兼容所有:obj.style.height = imgObj.height + 'px';
6、innerText
只兼容IE:obj.innerText= "myText";
兼容所有: if (document.all) { obj.innerText = "myText"; } else { obj.textContent = "myText"; }
二、事件
1、事件流,目前事件流主要指捕获-目标-冒泡,二IE6-IE8不支持事件捕获,一般在事件冒泡阶段对事件作出响应。
2、添加事件和删除事件
只兼容IE:obj.achEvent("onclick",handler) click代表事件,handler代表处理函数。删除事件用detachEvent("click",handler)。
兼容飞IE:obj.addEventListener("click",handler,false) click代表事件,handler代表处理函数,第三个参数表示是否捕获,这里false表示不用在捕获阶段,一般为false。删除事件用removeEventListener("click",handler,false)。
3、事件对象
对于事件对象event,IE下为window.event,兼容所有浏览器写法为event = event || window.event;
获取触发事件的目标节点,IE下为event.srcElement,非IE浏览器为event.target,要获取定义了事件的对象则用event.this。
三、BOM
1、打开窗口
只兼容IE:IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口
兼容所有:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
2、获取Frame对象
只兼容IE:var frame1 = window.testFrame
兼容所有:window.top.document.getElementById("frameId")来访问frame标签,并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容,也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容 。
目前我所遇到的常用的总结就这么多,后面学习中遇到的我会补充添加进来。