javascript的语法要注意什么（javaScript中一些常见的兼容性问题解决方法）

一般兼容性问题都体现到DOM和事件上，这里我们，我来为大家讲解一下关于javascript的语法要注意什么?跟着小编一起来看一看吧!

javascript的语法要注意什么

一般兼容性问题都体现到DOM和事件上，这里我们

只聊ie6 版本浏览器，希望小伙伴们别纠结更低版本浏览器哈。

• document.getElementsByclassName 不兼容ie6 7 8
• 解决方法：

function getByClass(oParent,sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName("*"); var re=new RegExp("\\b" sClass "\\b","i"); for (var i=0;i<aEle.length;i ) { if(re.test(aEle[i].className)) { aResult.push(aEle[i]); } } return aResult; }

• document.querySelector 不兼容ie6 7
• 这个选择器获取方法还是很推荐使用的
• 解决方法：可以使用 getElementById
• document.querySelectorAll 不兼容ie6 7
• 这个选择器获取方法还是很推荐使用的，和上面不同的是，它是获取一组元素
• 解决方法：可以使用 getElementsByTagName 或者 上面封装的getByClass

• 自定义属性操作方法
• getAttribute(name) 不兼容ie6 7
• setAttribute(name,value) 不兼容ie6 7
• removeAttribute(name) 不兼容ie6 7
• 解决方法：

javascript // 个人建议加加载完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 设置
• 解决方法：

javascript function getDataset(ele){ if(ele.dataset){ return ele.dataset; }else{ var attrs = ele.attributes, dataset = {}, name, matchStr; for(var i = 0;i<attrs.length;i ){ matchStr = attrs[i].name.match(/^data-(. )/); if(matchStr){ name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){ return letter.toUpperCase(); }); dataset[name] = attrs[i].value; } } return dataset; } }

• 操作class方法
• classList.add('name') 不兼容ie6 7 8 9
• classList.remove('name') 不兼容ie6 7 8 9
• 解决方法：

javascript 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

// 获取子节点 var children = obj.children || obj.childNodes // 获取第一个子节点 var first = obj.firstElementChild || obj.firstChild // 获取最后一个子节点 var last = obj.lastElementChild || obj.lastChild // 获取上一个兄弟节点 var prev = obj.previousElementSibling || obj.nextElementSibling // 获取下一个兄弟节点 var next = obj.nextElementSibling || obj.nextElementSibling

// 有文档头 // - docuemnt.documentElement.scrollTop / scrollLeft // 没有文档头 // - document.body.scrollTop / scrollLeft // 兼容 var top = docuemnt.documentElement.scrollTop || document.body.scrollTop var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

• 浏览器可视区大小

// 包含工具条与滚动条 // - document.documentElement.clientWidth / clientHeight // 不包含工具条与滚动条 // - window.innerWidth / innerHeight // - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度

• 事件对象

javascript // 事件对象 // ev 不兼容ie 6 7 8 // window.event 兼容所有浏览器 document.onclick = function (ev) { ev = ev || window.event }

• 获取页面中鼠标位置
• ev.pageX/ev.pageY 不兼容ie6 7 8
• 解决方案：

javascript var x = ev.clientX document.documentElement.scrollLeft var y = ev.clientY document.documentElement.scrollTop

• 获取键盘码
• ev.keyCode 不兼容火狐
• ev.which 不兼容 ie6 7 8
• 解决方案

javascript var code = keyCode || which

• 获取事件源
• ev.target 不兼容 ie6 7 8
• ev.srcElement 兼容所有浏览器
• 解决方案：

javascript var src = target || srcElement

• 阻止默认行为
• ev.preventDefault() 不兼容ie6 7 8
• ev.returnValue = false 兼容所有浏览器
• 解决方案：

javascript function stopDefault(ev) { if (ev && ev.preventDefault) { ev.preventDefault() } else { event.returnValue = false } return false; }

• 阻止事件冒泡
• e.stopPropagation() 不兼容ie6 7 8
• ev.cancelBubble = true 兼容所有浏览器
• 解决方案：

javascript function stopPropagat(ev){ if (ev&& evstopPropagation) { evstopPropagation() } else { event.cancelBubble = true } }

• 事件绑定
• obj.addEventListener 不兼容9
• obj.attachEvent 兼容ie6 7 8
• 解决方案：

javascript 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
• 解决方案：

javascript function on(obj, type, fn){ if(obj.removeEventListener){ obj.removeEventListener(type, fn, false) }else{ obj.detachEvent('on' type, fn) } }

整理不易，如有遗漏还请多多包涵，有疑问的同学可以在文章底部留言哦~