一般兼容性问都体现到DOM和事件上
只聊ie6+版本浏览器，希望小伙伴们别纠结更低版本浏览器哈^_^
DOM
获取元素
document.getElementsByclassName 不兼容ie6 7 8
解决方法：
functiongetByClass(oParent,sClass) {
varaResult=[];
varaEle=oParent.getElementsByTagName("*");
varre=newRegExp("\\b"+sClass+"\\b","i");
for(vari=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
returnaResult;
}
document.querySelector 不兼容ie6 7
这个选择器获取方法还是很推荐使用的
解决方法：可以使用getElementById
document.querySelectorAll 不兼容ie6 7
这个选择器获取方法还是很推荐使用的，和上面不同的事，它是获取一组元素
解决方法：可以使用 getElementsByTagName 或者 上面封装的getByClass
属性
自定义属性操作方法
getAttribute(name) 不兼容ie6 7
setAttribute(name,value) 不兼容ie6 7
removeAttribute(name) 不兼容ie6 7、
解决方法：
// 个人建议加加载完html，使用js给标签赋值
obj.index = 1 //设置
console.log(obj.index) //获取
obj.index = '' //清空
自定义属性data-* 不兼容ie6 7 8 9 10
console.log(obj.dataset.name)获取
obj.dataset.name =
value 设置
解决方法：
function getDataset(ele){
if(ele.dataset){
return ele.dataset;
}else{
var attrs = ele.attributes,
dataset = {},
name,
matchStr;
for(var i =0;i
matchStr =attrs[i].name.match(/^data-(.+)/);
if(matchStr){
name =matchStr[1].replace(/-([\da-z])/gi,function(all,letter){
returnletter.toUpperCase();
});
dataset[name] =attrs[i].value;
}
}
return dataset;
}
}
操作class方法
classList.add('name')不兼容ie6 7 8 9
classList.remove('name')不兼容ie6 7 8 9
解决方法：
function addClass(obj, class){
if(!this.contains(class)){
obj.className +=' ' + class;
}
}
function removeClass(obj,class){
if(obj.className.indexOf(class)!== -1){
var reg= new RegExp(class);
obj.className = obj.className.replace(reg,'');
}
}
节点
节点类一起总结: 前面的不兼容ie6
// 获取子节点
varchildren=obj.children||obj.childNodes
// 获取第一个子节点
varfirst=obj.firstElementChild||obj.firstChild
// 获取最后一个子节点
varlast=obj.lastElementChild||obj.lastChild
// 获取上一个兄弟节点
varprev=obj.previousElementSibling||obj.nextElementSibling
// 获取下一个兄弟节点
varnext=obj.nextElementSibling||obj.nextElementSibling
滚动距离
// 有文档头
// - docuemnt.documentElement.scrollTop / scrollLeft
// 没有文档头
// - document.body.scrollTop / scrollLeft
// 兼容
vartop=docuemnt.documentElement.scrollTop||document.body.scrollTop
varleft=docuemnt.documentElement.scrollLeft||document.body.scrollLeft
浏览器可视区大小
// 包含工具条与滚动条
// - document.documentElement.clientWidth / clientHeight
// 不包含工具条与滚动条
// - window.innerWidth / innerHeight
// - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度
事件
事件对象
// 事件对象
// ev 不兼容ie 6 7 8
// window.event 兼容所有浏览器
document.onclick = function (ev) {
ev = ev || window.event
}
获取页面中鼠标位置
ev.pageX/ev.pageY 不兼容ie6 7 8
解决方案：
var x = ev.clientX + document.documentElement.scrollLeft
var y = ev.clientY + document.documentElement.scrollTop
获取键盘码
ev.keyCode 不兼容火狐
ev.which 不兼容ie6 7 8
解决方案：
var code = keyCode || which
获取事件源
ev.target 不兼容ie6 7 8
ev.srcElement 兼容所有浏览器
解决方案：
var src = target || srcElement
阻止默认行为
ev.preventDefault() 不兼容ie6 7 8
ev.returnValue = false 兼容所有浏览器
解决方案：
function stopDefault(ev) {
if (ev &&ev.preventDefault) {
ev.preventDefault()
} else {
event.returnValue = false
}
return false;
}
阻止事件冒泡
e.stopPropagation() 不兼容ie6 7 8
ev.cancelBubble = true 兼容所有浏览器
解决方案：
function stopPropagat(ev){
if (ev&&evstopPropagation) {
evstopPropagation()
} else {
event.cancelBubble = true
}
}
事件绑定
obj.addEventListener 不兼容9+
obj.attachEvent 兼容ie6 7 8
解决方案：
function on(obj, type, fn){
if(obj.addEventListener){
obj.addEventListener(type,fn, false)
}else{
obj.attachEvent('on'+type,fn)
}
}
事件解除绑定
obj.removeEventListener 不兼容9+
obj.detachEvent 兼容ie6 7 8
解决方案：
function on(obj, type, fn){
if(obj.removeEventListener){
obj.removeEventListener(type, fn, false)
}else{
obj.detachEvent('on'+type,fn)
}
}
整理不易，如有遗漏还请多多包涵^_^
