浏览器的兼容

1：窗口的位置和大小

IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。

兼容：

var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

2：窗口页面大小

Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性：innerWidth 和 innerHeight，返回浏览器窗口本身的尺寸；outerWidth 和 outerHeight，返回浏览器窗口本身及边框的尺寸。：在 Chrome 中，innerWidth=outerWidth、innerHeight=outerHeight；

在IE以及Firefox，Safari，Opera和Chrome中，document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面窗口的信息。 PS：在 IE6 中，这些属性必须在标准模式下才有效；如果是怪异模式，就必须通过 document.body.clientWidth 和 document.body.clientHeight 取得相同的信息。

兼容：

   //如果是 Firefox 浏览器，直接使用 innerWidth 和 innerHeight
var width = window.innerWidth;         //这里要加 window，因为 IE 会无效
var height = window.innerHeight;
if (typeof width != 'number') {         //如果是 IE，就使用 document
    if (document.compatMode == 'CSS1Compat') {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        width = document.body.clientWidth;     //非标准模式使用 body
        height = document.body.clientHeight;
    }
}

3：空白文本节点（可采用.children 属性代替）

在非 IE 中，标准的 DOM 具有识别空白文本节点的功能

兼容：

//第一种方法：忽略空白节点
function filterSpaceNode(nodes) {
    var ret = []; //新数组
    for (var i = 0; i < nodes.length; i ++) {
    //如果识别到空白文本节点，就不添加数组
        if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
    //把每次的元素节点，添加到数组里
            ret.push(nodes[i]);
        }
    return ret;
}


//第二种方法：删除空白节点
function filterSpaceNode(nodes) {
    for (var i = 0; i < nodes.length; i ++) {
        if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
            //得到空白节点之后，移到父节点上，删除子节点
            nodes[i].parentNode.removeChild(nodes[i]);
        }
    }
    return nodes;
}

4：获取计算后的样式

//window 对象下提供了 getComputedStyle()方法。接受两个
//参数，需要计算的样式元素，第二个伪类(:hover)，如果没有没有伪类，就填 null。
//IE 不支持这个 DOM2 级的方法，但有个类似的属性可以使用 currentStyle 属性

var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;

5：获取CSSStyleSheet 类型及css样式

CSSStyleSheet 类型表示通过<link>元素和<style>元素包含的样式表。

兼容：

document.getElementsByTagName('link')[0]; //HTMLLinkElement
document.getElementsByTagName('style')[0]; //HTMLStyleElement
//这两个元素本身返回的是 HTMLLinkElement 和 HTMLStyleElement 类型，但
//CSSStyleSheet 类型更加通用一些。
//得到这个类型非 IE 使用 sheet 属性，IE 使用 styleSheet；
var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet;   //得到 CSSStyleSheet
//除了上面的方法另外有种方法
var sheet = document.styleSheets[0];         //CSSStyleSheet，第一个样式表对象
//W3C下的sheet属性和方法
sheet.cssRules              //CSSRuleList，样式表规则集合
sheet.deleteRule(0);        //删除第一个样式规则
sheet.insertRule("body {background-color:red}", 0);   //在第一个位置添加一个样式规则
//IE下的sheet属性和方法
sheet.rules;                //代替 cssRules 的 IE 版本
sheet.removeRule(0);        //代替 deleteRule 的 IE 版本
sheet.addRule("body", "background-color:red", 0);     //代替 insertRule 的 IE 版本
//兼容性函数
//获取css规则
var sheet = document.styleSheets[0]; //CSSStyleSheet
var rules = sheet.cssRules || sheet.rules; //CSSRuleList，样式表的规则集合列表

//添加css规则
function insertRule(sheet, selectorText, cssText, position) {
        //如果是非 IE
    if (sheet.insertRule) {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
        //如果是 IE
    } else if (sheet.addRule) {
        sheet.addRule(selectorText, cssText, position);
    }
}

//删除css规则
function deleteRule(sheet, index) {
        //如果是非 IE
    if (sheet.deleteRule) {
        sheet.deleteRule(index);
        //如果是 IE
    } else if (sheet.removeRule) {
        sheet.removeRule(index);
    }
}

6：滚动距离

// IE和火狐:document.documentElement.scrollTop
// 谷歌：document.body.scrollTop
height = document.documentElement.scrollTop||document.body.scrollTop;

7：事件对象

var e = e||window.event;              // IE 自定义个event对象
var target = e.target||e.srcElement;  //获取事件目标 W3C IE
window.event ? e.cancelBubble = true : e.stopPropagation(); //阻止冒泡    IE W3C
window.event ? e.returnValue = true : e.preventDefault();   //取消默认行为  IE W3C

8：现代事件绑定

//addEventListener()和 removeEventListener()。
//所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布尔值(true //表示捕获，false 表示冒泡)。
//IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同的参数：事//件名称和函数。
//兼容：
//添加事件
function addEvent(obj, type, fn) { //添加事件兼容
    if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}

//删除事件
function removeEvent(obj, type, fn) { //移除事件兼容
    if (obj.removeEventListener) {
        obj.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
}

9：移入移出属性

//在 W3C 提供了一个属性：relatedTarget；这个属性可以在 mouseover 和 mouseout 事件
//中获取从哪里移入和从哪里移出的 DOM 对象。
//IE 提供了两组分别用于移入移出的属性：fromElement 和 toElement，分别对应 mouseover
//和 mouseout。
//兼容
function getTarget(evt) {
    var e = evt || window.event;            //得到事件对象
    if (e.srcElement) {                     //如果支持 srcElement，表示 IE
        if (e.type == 'mouseover') {        //如果是 over
            return e.fromElement;           //就使用 from
        } else if (e.type == 'mouseout') {  //如果是 out
            return e.toElement;             //就使用 to
        }
    } else if (e.relatedTarget) {            //如果支持 relatedTarget，表示 W3C
        return e.relatedTarget;
    }
}

10：表单取得选择的文本

//Firefox 为文本框提供了两个属性：selectionStart 和 selectionEnd
//IE ：提供selection 对象，属于 document。这个对象保存着用户在整个文档范围内选择的文本信息
//兼容：
function getSelectText(text) {
    if (typeof text.selectionStart == 'number') {        //非 IE
        return text.value.substring(text.selectionStart, text.selectionEnd);
    } else if (document.selection) {                      //IE
        return document.selection.createRange().text;     //获取 IE 选择的文本
    }
}

/*PS：有一个最大的问题，就是 IE 在触发 select 事件的时候，在选择一个字符后立即触
发，而其他浏览器是选择想要的字符释放鼠标键后才触发。所以，如果使用 alert()的话，导
致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一，但可以通过不去使用 alert()来
解决。*/

    //alert(getSelectText(this)); //导致用户行为结果不一致
    document.getElementById('box').innerHTML = getSelectText(this);

11：其他

1 alert(document.getElementById('box').bbb);    //获取自定义属性的值，非 IE 不支持
2 document.getElementById('box').getAttribute('class');   //获取元素的 class 值，IE 不支持
  document.getElementById('box').getAttribute('className'); //非 IE 不支持
3 box.style.cssFloat || box.style.styleFloat;  //，非 IE 用 cssFloat，IE 用 styleFloat