兼容问题
1.针对于字符串，想要获取字符串第几位的字符出现的兼容问题
var str="abcde";
aletr(str[1]);//获取str字符串的第二位：“b”
但是低版本IE（5,6）不支持
那么有一个方法是所有浏览器都支持的，charAt（）；
用法：str.charAt(1)//也是输出“b”;
2.针对DOM获取子节点中的childNodes获取子节点出现的兼容性问题
childNodes:获取子节点,
--IE6-8:获取的是元素节点,正常
--高版本浏览器:但是会包含文本节点和元素节点(可能会不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
--nodeType=3-->文本节点（知识点）
--nodeTyPE=1-->元素节点（知识点）
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes为我们带来的困扰完全可以有children属性来代替。（children也有JQ方法（知识点）。。。跟find方法类似）
children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，
比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul');
oUl.children[0].style.background="red"; （这个是属性，，，要加【0】这一类的东西）
3.关于使用 event对象，出现的兼容性问题
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
获得event对象兼容性写法
event || (event = window.event（IE9以下不支持）);
获得target兼容型写法
event.target||event.srcElement（IE）
阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false)（IE）;
阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)（IE）;
event.x与event.y问题
说明：IE下，event对象有x,y属性,但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x,y属性。
解决方法：使用var x = e.x ? e.x : e.pageX; 来代替IE下的event.x或者Firefox下的e.pageX；
4.DOM相关，获取第一个，最后一个，上一个，下一个节点的兼容问题
//DOM节点相关，主要兼容IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
IE不支持getComputedStyle方法
//获取元素的非行间样式值
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
6.addEventListener兼容问题
//设置监听事件
function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false（事件冒泡）（例如：addEvent（obj，“click”，function））
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
};
}
7.document.body兼容性问题
常用来获取浏览器的宽高；
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽（包括未滚动到的地方和以滚动被遮盖的地方）
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高（包括未滚动到的地方和以滚动被遮盖的地方）
var scrollTop=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离
var offsetTop=obj.offsetTop||obj.offsetTop;//元素距离最近一个相对定位的上移距离
var offsetLeft=obj.offsetLeft||obj.offsetLeft;//元素距离最近一个相对定位的左移距离
var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标
8.自定义属性问题
说明：IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性，Firefox下，只能使用getAttribute()获取自定义属性。
解决方法：统一通过getAttribute()获取自定义属性，不过更推荐直接通过“点”运算符访问元素属性。
9.innerText的问题
innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
}
10.ajax获取XMLHTTP的区别
var xml;
if （window.XMLHttpRequest） {
xml = new XMLHttpRequest()'
} else {
xml = new Activexobject("Microsoft.XMLHttp");
}
注意：在IE中，xml.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。
11.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
12.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
13.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。(实例：
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
page.html：可以是你的html地址，也可以是网络地址
newwindow 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许;
)
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";