兼容性写法（部分）

判断用户输入事件

大多数浏览器：oninput  
IE678浏览器：onpropertychange 

$("txt").oninput = $("txt").onpropertychange = function(){
    if(this.value == ""){
        $("message").style.display = 'block';
    }else{
        $("message").style.display = 'none';
    }
} 

封装自己class类，根据类名找对象

同getElementByClassnme

function getClass(classname){
    //如果浏览器支持，则直接返回
    if(document.getElementsByClassName){
        return document.getElementsByClassName(classname);
    };

    // 不支持的 浏览器
    var arr = []; // 用于存放满足的数组
    var dom = document.getElementsByTagName("*");
    for(var i=0;i<dom.length;i++) {
        if(dom[i].className == classname) {
            arr.push(dom[i]);
        }
    }
    return arr;
}

兄弟节点

// 下一个兄弟
nextSibling  IE678
nextElementSibling  其他浏览器  
   
// 上一个兄弟 
previousSibling  IE678    
previousElementSibling  其他浏览器

写法：var div = one.nextElementSibling || one.nextSibling;

子节点

// 第一个孩子
firstChild   IE678
firstElementChild  其他浏览器  

写法：var one.firstElementChild || one.firstChild;   

按钮不可用

写法：btn.disabled = 'disabled' || btn.disabled = true; 

事件兼容性写法

写法：var event = event || window.event;

拖动 原理 ==   鼠标按下  接着 移动鼠标

bar.onmousedown = function(){
    document.onmousemove = function(){

    }
}

拖动的时候不能选中文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

scrollTop获取值的函数封装 scroll

function scroll() {
    //判断浏览器的类型
    if(window.pageYOffset != null) { //  IE9+和其他浏览器        
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    } else if(document.compatMode == "CSS1Compat") { // 声明的了 DTD
        // 检测是不是怪异模式的浏览器
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    } else {  //  剩下的肯定是怪异模式的
        return { 
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    };
};
window.onscroll = function() {
    console.log(scroll().top);
};

获取屏幕宽度函数封装 client

function client() {
    if(window.innerWidth != null) { // IE9 +最新浏览器
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else if(document.compatMode === "CSS1Compat") { // 标准浏览器
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    } else {
        return {   // 怪异浏览器
            width: document.body.clientWidth,
            height: document.body.clientHeight 
        }
    };      
};

冒泡事件的清除

var event = event || window.event;
if(event && event.stopPropagation) {
    event.stopPropagation();  //  w3c标准
} else{
    event.cancelBubble = true;  // IE678浏览器
};

得到当前选中内容的id

写法：var targetId = event.target ? event.target.id : event.srcElement.id;

获取选中的文字

if(window.getSelection){
    txt = window.getSelection().toString();   // 转换为字符串
}else{
    txt = document.selection.createRange().text;   // IE浏览器
}