JavaScript中浏览器兼容代码-优快云博客

本文详细介绍了在不同浏览器（如谷歌、火狐、IE8）中实现网页元素文本内容设置、节点获取及事件绑定的兼容性代码。通过使用textContent、innerText、innerHTML属性，以及parentNode、childNodes等方法，结合addEventListener和attachEvent，确保网页在各大主流浏览器中的一致性和稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器界中，有五大巨头，分别是谷歌，火狐，苹果，Opera和IE，其中火狐有自己的部分属性，IE不同的版本也有各自的一些属性，要想在这些浏览器中正确是显示网页，就要为这些属性写上它们的兼容代码,一般只要适配了谷歌，火狐和IE这三种浏览器，其他浏览器基本都支持。

技巧：不管是哪一款浏览器，如果浏览器不支持该属性的话，其类型都是“undefined”，根据这个类型既可写出其兼容代码，以下内容是需要对浏览器进行兼容的地方。

设置标签的文本内容，即闭合标签中间的内容，如p标签，div标签，span标签...
textContext属性：谷歌,火狐支持,IE8不支持
innerText属性：谷歌,火狐,IE8都支持
innerHTML属性：浏览器都支持，推荐使用

其兼容代码

function setInnerText(element,text) {
    //判断浏览器是否支持这个属性
    if(typeof element.textContent =="undefined"){//如果浏览器不支持该属性
     element.innerText=text;
    }else{//支持这个属性
      element.textContent=text;
    }
  }

  //获取任意标签中间的文本内容
  function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
     return element.innerText;
    }else{
      return element.textContent;
    }
  }
复制代码

获取节点或元素的兼容代码：
在谷歌和火狐浏览器中，都支持获取节点和元素的方法，但是在IE8浏览器中，对于获取具体的节点或或元素，则IE8会不支持和得到的结果不同。在IE8中，对于获取具体节点的方法，返回的是元素，而获取具体元素的方法，则不支持。

获取相关节点和元素的方法，一共有12种

获取父亲节点：对象.parentNode 获取父亲元素：对象.parentElement 获取子节点：对象.childNodes （返回伪数组）获取子元素：对象.children （返回伪数组）获取第一个节点：对象.firstChild 获取第一个子元素：对象.firstElementChild 获取最后一个子节点：.lastChild 获取最后一个子元素：对象.lastElementChild 获取前一个兄弟节点：对象.previousSibling 获取前一个兄弟元素：对象.previousElementSibling 获取后一个兄弟节点：对象.nextSibling 获取后一个兄弟元素：对象.nextElementSibling

总结：在谷歌和火狐浏览器中,1~12种方法都支持，获取节点的方法获取到的是节点，获取元素的方法获取到的是元素；在IE8浏览器中，从5开始，获取节点的方法获取到的是元素，获取元素的方法获取到的是undefind，不支持获取元素的方法
说到底，我们获取节点的目的主要还是获取元素节点，因此，其兼容性代码

获取任意一个父级元素的第一个子级元素

//因为firstChild毕竟是获取节点的方法，所以加上循环确保此节点是元素节点，严谨写法
function getFirstChildElement(fElement){
	if(fElement.firstElementChild){
	    return fElement.firstElementChild;
	}else{
	    var node = fElement.firstChild;
	    while(node && node.nodeType != 1){
		node = node.nextSibling;
	    }
	return node;
	}
}
复制代码

获取任意一个父级元素的最后一个子级元素

  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }

复制代码

获取任意元素的点一个元素
获取任意元素的后一个元素
其代码可参考以上

为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
谷歌和火狐浏览器支持addEventListener(type,fn,false)，不支持attachEvent("on"+type,fn)，而IE相反。

  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
复制代码

注意：对象.addEventListener(type,fn,false)和对象.attachEvent("on"+type,fn)这两个方法可对同个点击事件进行绑定，而不会覆盖掉前面的监听方法，假如对按钮的点击事件进行了3次监听，调用这种方法的话，3次监听都能够执行，而不会覆盖掉。对象.addEventListener(type,fn,useCapture)：这是谷歌和火狐的兼容多监听方法
type:String 事件类型，前面不能加“on”，如点击事件：“click”
fn：Function 匿名函数或命名函数
useCapture：一般为false
对象.attachEvent(type,fn)：这是谷歌的兼容多监听方法
type：String 事件类型，前面要加“on”，如点击事件：“onclick”