On the compatibility of browsers in JavaScript _javascript skills

Browser compatibility issues are an easy to ignore and most important part of the actual development. Before we talk about the old version of the browser compatibility issue, we first need to understand what is ability detection, it is to detect the browser has the ability to determine whether the current browser support to call the properties or methods. Here are a few brief introductions.

1, innertext and innercontent
1) innertext and innercontent function the same
2) innertext IE8 Browser support
3) innercontent old version of Firefox support
4 new version of the browser are supported in both ways

1//old version browser compatible innertext and Innercontent
2 if (element.textcontent) {
3 return    element.textcontent;
4  } else {
5 return    Element.innertext;
6  }

2, get the sibling node/element compatibility problem
1 Brothers node, all browsers are supported
①nextsibling the next sibling node, which may be a non element node; Gets to the text node
②previoussibling the previous sibling node, possibly a non-element node, and get to the text node
2 sibling element, IE8 previously not supported

①previouselementsibling gets the previous sibling element, ignoring whitespace
②nextelementsibling gets the next adjacent sibling element, ignoring whitespace

Compatible browsers
//Get the next adjacent sibling element
function getnextelement (element) {
  //capability Detection
 if (element.nextelementsibling) { return
   element.nextelementsibling;
  } else {
     var node = element.nextsibling;
     while (node && node.nodetype!== 1) {
         node = node.nextibling;
     }
     return node;
  }
 }

/**
* Returns the previous element
* @param element
* @returns {*} *
/function getpreviouselement (element) {
  if (element.previouselementsibling) {return
    element.previouselementsibling;
  } else {
    var el = element.previoussibling;
    While (El && el.nodetype!== 1) {
      el = el.previoussibling;
      }
    Return el;
  }
}

/**
* Returns the first element Firstelementchild browser compatible
* @param parent
* @returns {*}
/function Getfirstelement ( Parent) {
  if (parent.firstelementchild) {return
    parent.firstelementchild;
  } else {
    var el = parent.firstchild;
    While (El && el.nodetype!== 1) {
      el = el.nextsibling;
      }
    Return el;
  }
}

/**
* Returns the last element
* @param parent
* @returns {*}
*
/function getlastelement (parent) {
  if ( Parent.lastelementchild) {return
    parent.lastelementchild;
  } else {
    var el = parent.lastchild;
    While (El && el.nodetype!== 1) {
      el = el.previoussibling;
      }
    Return el;
  }
}

/**
* Gets all sibling elements of the current element
* @param element
* @returns {Array} */
function Sibling (element) {
  if (!) Element) return;
  
  var elements = [];
  var el = element.previoussibling;
  while (EL) {
    if (El.nodetype = 1) {
      elements.push (EL);
    }
    el = el.previoussibling;
  }
   el = element.previoussibling;
   while (EL) {
    if (El.nodetype = 1) {
      elements.push (EL);
    }
    el = el.nextsibling;
  }
    return elements;
}

3, Array.filter ();
Tests all elements using the specified function and creates a new array that contains all the tested elements

Compatible with the old environment
if (! Array.prototype.filter)
{
 Array.prototype.filter = function (Fun/*, Thisarg * *)
 {
  "use strict";
  if (this = = void 0 | | this = = NULL)
   throw new TypeError ();
  var t = Object (this);
  var len = t.length >>> 0;
  if (typeof fun!== "function")
   throw new TypeError ();
  var res = [];
  var thisarg = arguments.length >= 2? ARGUMENTS[1]: void 0;
  for (var i = 0; i < len; i++)
  {
   if (I in t)
   {
    var val = t[i];
    Note:technically This should object.defineproperty
    at//    the next index, as push can is affected by
    //< C23/>properties on Object.prototype and Array.prototype.    But that method ' s new, and collisions should
    is//    rare, so use the more-compatible alternative.
    if (Fun.call (Thisarg, Val, I, T))
     Res.push (val);
   }
  return res;}
 ;
}

4, Array.foreach ();
Traversing an array

Compatible with old environment//Production steps of ECMA-262, Edition 5, 15.4.4.18//reference:http://es5.github.io/#x15.4.4.18 if (!
  Array.prototype.forEach) {Array.prototype.forEach = function (callback, thisarg) {var T, K;
  if (this = = null) {throw new TypeError (' This are null or not defined '); }//1. Let O is the result of calling Toobject () passing the//|this|
  Value as the argument.
  var O = Object (this); 2.
  Let Lenvalue is the result of the calling the ' Get ' () internal//method of O with the argument "Length". 3.
  Let Len is ToUint32 (lenvalue).
  var len = o.length >>> 0; 4. If Iscallable (callback) is false, throw a TypeError exception. see:http://es5.github.com/#x9. One if (typeof callback!== "function") {throw new TypeError (callback + ' is not a
  function '); }//5. If Thisarg is supplied, let T is thisarg;
  else let//T is undefined.
  if (Arguments.length > 1) {T = Thisarg; }//6.
  Let k is 0 k = 0; 7. Repeat, while K;
   Len while (K < Len) {var kvalue; A.
   Let Pk is ToString (k). This is implicit to LHS operands of the In operator//b.
   Let Kpresent is the result of calling the Hasproperty//internal method of O with argument Pk. This step can is combined with C//C. If Kpresent is true, then if (k in O) {//I.
    Let Kvalue is the result of calling the get internal//method of O with argument Pk.
    Kvalue = O[k]; Ii.
    Call the "call internal" of the callback with T AS//The This value and argument list containing Kvalue, K, and O.
   Callback.call (T, Kvalue, K, O);
   }//d. Increase K by 1.
  k++; }//8.
return undefined}; }

5. Registration Event
. AddEventListener = function (type,listener,usecapture) {};
First parameter event name
Second parameter event handler function (listener)
The third argument true catches false bubbles
IE9 will support you later.
Compatible with old environment

var eventtools = {
    addeventlistener:function (element, EventName, listener) {
      //capability detection
      if ( Element.addeventlistener) {
        Element.addeventlistener (eventName, Listener,false);
      } else if (element.attachevent) {
        element.attachevent ("on" + eventName, listener);
      } else{
        element["on" + eventName] = Listener
      }
    },

//  want to remove event, cannot use anonymous function
    Removeeventlistener:function (element, EventName, listener) {
      if (element.removeeventlistener) {
        Element.removeeventlistener (Eventname,listener,false);
      } else if (element.detachevent) {//IE8 previously registered. Attachevent and removal events. DetachEvent
        element.detachevent ("On" +eventname, listener);
      } else{
        element["on" + eventName] = null;
      }
    }
  ;

6. Event objects
1 Event parameter E, is the event object, the standard method of obtaining
Btn.onclick = function (e) {}
2) E.eventphase event phase, IE8 not previously supported
3 E.target is always the object that triggers the event (click on the button)
i) IE8 before srcelement
II) browser compatible
var target = E.target | | Window.event.srcElement;

Get Event object compatible browser
 getevent:function (e) {return
  e | | window.event//E Event object standard get way; window.event IE8 previous way to get event objects 
   }
//compatible target
 gettarget:function (e) {return
  E.target | | e.srcelement;
 }

7, get the mouse position on the page
① position in the viewable area: E.clientx E.clienty
Location of ② in the document:
i) E.pagex E.pagey
II) browser compatible

var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
 var pagey = E.clienty + scrolltop;

8, get the page scrolling distance

 Compatible browser
 var scrolltop = Document.documentElement.scrollTop | | document.body.scrolltop;

9, the elimination of text selection

Compatible browsers
 window.getselection window.getselection () removeallranges (): Document.selection.empty ();

"Summary" Here is only a part of the summary, the actual development will also encounter a variety of browser-compatible issues. Different browsers in the PC and mobile phone end will encounter different adaptation problems, these will be waiting for the children's shoes together to explore the summary ~ ~ Hope to help everyone, the shortage of places please more advice ~ ~ ~ ~

The above analysis of JavaScript browser compatibility problem is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.