您现在的位置是：网站首页> 编程资料编程资料

浅谈JavaScript中浏览器兼容的问题_心得技巧_网页制作_

2021-09-11 888人已围观

简介 下面小编就为大家带来一篇浅谈JavaScript中浏览器兼容的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。

1、innerText 和 innerContent
1）innerText 和 innerContent 的作用相同
2）innerText IE8之前的浏览器支持
3）innerContent 老版本的Firefox支持
4）新版本的浏览器两种方式都支持

JavaScript Code复制内容到剪贴板
  1. // 老版本浏览器兼容  innerText 和 innerContent   
  2.   if (element.textContent) {   
  3.         return element.textContent ;   
  4.    } else {   
  5.        return element.innerText;   
  6.    }  

2、获取兄弟节点/元素的兼容性问题

1）兄弟节点，所有浏览器都支持

①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点

②previousSibling  上一个兄弟节点，可能是非元素节点；会获取到文本节点

 2）兄弟元素，IE8以前不支持

①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白 

②nextElementSibling  获取下一个紧邻的兄弟元素，会忽略空白    

JavaScript Code复制内容到剪贴板
  1. //兼容浏览器   
  2. // 获取下一个紧邻的兄弟元素   
  3. function getNextElement(element) {   
  4.    // 能力检测   
  5.   if(element.nextElementSibling) {   
  6.       return element.nextElementSibling;   
  7.    } else {   
  8.          var node = element.nextSibling;   
  9.          while(node && node.nodeType !== 1) {   
  10.                  node = node.nextibling;   
  11.          }   
  12.          return node;   
  13.     }   
  14.  }  

JavaScript Code复制内容到剪贴板
  1. /**  
  2. * 返回上一个元素  
  3. * @param element  
  4. * @returns {*}  
  5. */  
  6. function getPreviousElement(element) {   
  7.     if(element.previousElementSibling) {   
  8.         return element.previousElementSibling;   
  9.     }else {   
  10.         var el = element.previousSibling;   
  11.         while(el && el.nodeType !== 1) {   
  12.             el = el.previousSibling;   
  13.             }   
  14.         return el;   
  15.     }   
  16. }  
JavaScript Code复制内容到剪贴板
  1. /**  
  2. * 返回第一个元素firstElementChild的浏览器兼容  
  3. * @param  parent  
  4. * @returns {*}  
  5. */  
  6. function getFirstElement(parent) {   
  7.     if(parent.firstElementChild) {   
  8.         return parent.firstElementChild;   
  9.     }else {   
  10.         var el = parent.firstChild;   
  11.         while(el && el.nodeType !== 1) {   
  12.             el = el.nextSibling;   
  13.             }   
  14.         return el;   
  15.     }   
  16. }  
JavaScript Code复制内容到剪贴板
  1. /**  
  2. * 返回最后一个元素  
  3. * @param  parent  
  4. * @returns {*}  
  5. */  
  6. function getLastElement(parent) {   
  7.     if(parent.lastElementChild) {   
  8.         return parent.lastElementChild;   
  9.     }else {   
  10.         var el = parent.lastChild;   
  11.         while(el && el.nodeType !== 1) {   
  12.             el = el.previousSibling;   
  13.             }   
  14.         return el;   
  15.     }   
  16. }  
JavaScript Code复制内容到剪贴板
  1. /**  
  2. *获取当前元素的所有兄弟元素  
  3. * @param  element  
  4. * @returns {Array}  
  5. */  
  6. function sibling(element) {   
  7.     if(!element) return ;   
  8.        
  9.     var elements = [ ];   
  10.     var el = element.previousSibling;   
  11.     while(el) {   
  12.         if(el.nodeType === 1) {   
  13.             elements.push(el);   
  14.         }   
  15.         el = el.previousSibling;   
  16.     }   
  17.      el = element.previousSibling;   
  18.      while(el ) {   
  19.         if(el.nodeType === 1) {   
  20.             elements.push(el);   
  21.         }   
  22.         el = el.nextSibling;   
  23.     }   
  24.         return elements;   
  25. }  

3、array.filter();  
 
 // 使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组

JavaScript Code复制内容到剪贴板
  1. // 兼容旧环境   
  2. if (!Array.prototype.filter)   
  3. {   
  4.   Array.prototype.filter = function(fun /*, thisArg */)   
  5.   {   
  6.     "use strict";   
  7.     if (this === void 0 || this === null)   
  8.       throw new TypeError();   
  9.     var t = Object(this);   
  10.     var len = t.length >>> 0;   
  11.     if (typeof fun !== "function")   
  12.       throw new TypeError();   
  13.     var res = [];   
  14.     var thisArg = arguments.length >= 2 ? arguments[1] : void 0;   
  15.     for (var i = 0; i < len;

    上一篇：浅谈前端制作中，IE6还有必要兼容吗_心得技巧_网页制作_

    下一篇：让网页自动调用双核浏览器的极速模式(Webkit)_心得技巧_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网