Javascript兼容汇总

 

以下列出所有因浏览器版本冲突的属性或者方法，并在他们的下面给出解决方案

兄弟节点

nextSibling: 调用者是节点。IE678。IE9+异议

nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。

previousSibling： IE678 火狐谷歌IE9+ 异议

 

子节点:

firstChild:             IE678

firstElementChild 火狐谷歌IE9+异议

lastChild:             IE678

lastElementChild：火狐谷歌IE9+异议

 

兄弟节点我们不用

子节点我们只用children

兄弟节点怎么获得 div.parentNode.children[index];

 

点击事件

addEventListener(“click”,fn);

 

 

scroll的兼容性问题:

1.未声明 DTD（谷歌只认识他）

document.body.scrollTop

2.已经声明DTD（IE678只认识他）

document.documentElement.scrollTop

火狐/谷歌/ie9+以上支持的

window.pageYOffset

使用封装方法：

function scroll() {  // 开始封装自己的scrollTop
    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return {   // 未声明 DTD
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}