JavaScript之兼容性代码整合（常见、常用）

最新推荐文章于 2021-02-28 14:02:50 发布

Ivy_Ch

最新推荐文章于 2021-02-28 14:02:50 发布

阅读量454

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ivy_Ch/article/details/100055960

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

兼容性代码原理：
如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型（typeof 属性） 是不是undefined,就知道浏览器是否支持

1.textContent和innerText

设置标签中的文本内容

textContent属性,谷歌,火狐支持,IE8不支持
innerText属性,谷歌,火狐,IE8都支持

  //设置任意的标签中间的任意文本内容
  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;
    }
  }

2.获取相关节点

父级节点：object.parentNode

父级元素：object.parentElement

子节点：object.childrenNodes

子元素：object.firstChild

第一个子节点：object.firstChild（IE8中是第一个子元素）

第一个子元素：object.firstElementChild（IE8中不支持）

最后一个子节点：object.lastChild（IE8中是最后一个子元素）

最后一个子元素：object.lastElementChild（IE8中不支持）

某个元素的前一个兄弟节点：object..previousSibling（IE8中是前一个兄弟元素）

某个元素的前一个兄弟元素：object.previousElementSibling（IE8中不支持）

某个元素的后一个兄弟节点：object.nextSibling（IE8中是最后一个兄弟元素）

某个元素的后一个兄弟元素：object.nextElementSibling（IE8中不支持）

总结:

凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
从子节点和兄弟节点开始。凡是获取节点的代码在IE8中得到的是元素。获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持。

兼容性代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<ul id="uu">
  <li>第一个</li>
  <li>第二个</li>
  <li id="three">第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
  //第一个节点和第一个元素的获取的代码在IE8中可能不支持
  //element.firstChild--->谷歌和火狐获取的是第一个子几点
  //element.firstChild--->IE8获取的是第一个子元素
  //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持

  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.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;
    }
  }

  console.log(getFirstElementChild(my$("uu")).innerText);
  console.log(getLastElementChild(my$("uu")).innerText);

  //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
  //前一个节点和前一个元素的获取的代码在IE8中可能不支持
  //后一个节点和后一个元素的获取的代码在IE8中可能不支持

  //获取任意一个元素的前一个兄弟元素
  function getPreviousSibling(element){
      if (element.previousElementSibling) {
        return element.previousElementSibling;
      }else{
        var node=element.previousSibling;
        while(node&&node.nodeType!=1){
          node=node.previousSibling;
        }
        return node;
      }
  }
   //获取任意一个元素的后一个兄弟元素
 function getNextSibling(element){
      if (element.nextElementSibling) {
        return element.nextElementSibling;
      }else{
        var node=element.nextSibling;
        while(node&&node.nodeType!=1){
          node=node.nextSibling;
        }
        return node;
      }
  }
console.log(getPreviousSibling(my$("three")).innerText);
console.log(getNextSibling(my$("three")).innerText);
//学习节点操作还是为了操作元素

</script>
</body>
</html>

3.注册/移除事件的三种方式

为元素绑定单个事件(DOM)

对象.onclick = function () {

console.log('点击后执行');
};

为元素绑定多个事件(DOM):不兼容,有两种

2. 对象.addEventListener("",事件处理函数,false);--谷歌和火狐支持,IE8不支持

对应移除事件：对象..removeEventListener('事件类型', 事件处理函数, false);

为按钮绑定点击事件
参数1:事件的类型---事件的名字,没有on
参数2:事件处理函数---函数(命名函数,匿名函数)
参数3:布尔类型,就写false

3. 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

对应移除事件：对象..detachEvent('有on的事件类型', 事件处理函数)；

参数1:事件类型---事件名字，有on
参数2:事件处理函数---函数(命名函数,匿名函数)

 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;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

4.获取任意一个元素的任意一个样式属性的值

element：元素

attr：属性

返回值：属性的值（字符串）

注意：如果使用返回值来做计算，就要转化为数字parseInt（getStyle(element,attr)）；

 function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
   return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
  }


my$("btn").onclick=function () {
  console.log(getStyle(my$("dv"),"top"));
};

5.获取页面向上或者向左卷曲出去的距离的值

//获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

6.针对火狐、谷歌、IE兼容性问题

事件对象e 火狐和谷歌浏览器支持，window.event IE支持

（event = event || window.event）

下面整合成一个对象，方便调用

用法： evt.getClientY(e)

 //把代码放在一个对象中
  var evt={
    //window.event和事件参数对象e的兼容
    getEvent:function (evt) {
      return window.event||evt;
    },
    //可视区域的横坐标的兼容代码
    getClientX:function (evt) {
      return this.getEvent(evt).clientX;
    },
    //可视区域的纵坐标的兼容代码
    getClientY:function (evt) {
      return this.getEvent(evt).clientY;
    },
    //页面向左卷曲出去的横坐标
    getScrollLeft:function () {
      return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
    },
    //页面向上卷曲出去的纵坐标
    getScrollTop:function () {
      return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
    },
    //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
    getPageX:function (evt) {
      return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
    },
    //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
    getPageY:function (evt) {
      return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
    }
  };

Ivy_Ch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之兼容性代码整合（常见、常用）

兼容性代码原理：如果这个属性在浏览器中不支持,那么这个属性的类型是undefined判断这个属性的类型（typeof 属性）是不是undefined,就知道浏览器是否支持textContent和innerText：设置标签中的文本内容textContent属性,谷歌,火狐支持,IE8不支持innerText属性,谷歌,火狐,IE8都支持 //设置任意的标签中间的任意文本...
复制链接

扫一扫