Analysis of browser compatibility in JavaScript _ javascript skills

The following small series will give you an analysis of the compatibility of browsers in JavaScript. I think it is quite good. Now I will share it with you and give you a reference to the browser compatibility issue, which is easy to ignore and the most important part in actual development. Before talking about the compatibility of browsers of earlier versions, we should first understand what is capability detection. It is used to check whether the browser has this capability, that is, to determine whether the current browser supports the attributes or methods to be called. The following is a brief introduction.

1. innerText and innerContent
1) innerText and innerContent have the same effect.
2) browser support before innerText IE8
3) support for earlier versions of innerContent Firefox
4) The new version supports both browsers.

1 // earlier browsers are compatible with innerText and innerContent2 if (element. textContent) {3 return element. textContent; 4} else {5 return element. innerText; 6}

2. compatibility issues with obtaining sibling nodes/elements
1) sibling nodes supported by all browsers
① NextSibling: next sibling node, which may be a non-Element Node. A text node is obtained.
② A sibling node on previussibling, which may be a non-Element Node. A text node is obtained.
2) sibling elements, not supported by IE8

① Previuselementsibling gets the sibling element next to it and ignores the blank space.
② NextElementSibling gets the next adjacent sibling element, and the blank space is ignored

// Compatible with the browser // obtain the next sibling element function getNextElement (element) {// ability to detect 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. previuselementsibling) {return element. previuselementsibling;} else {var el = element. previussibling; while (el & el. nodeType! = 1) {el = el. previussibling;} return el ;}}

/*** Returns the browser compatible with the first element firstElementChild * @ 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 ;}}

/*** Return 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. previussibling;} return el ;}}

/*** Get all sibling elements of the current element * @ param element * @ returns {Array} */function sibling (element) {if (! Element) return; var elements = []; var el = element. previussibling; while (el) {if (el. nodeType = 1) {elements. push (el);} el = el. previussibling;} el = element. previussibling; while (el) {if (el. nodeType = 1) {elements. push (el);} el = el. nextSibling;} return elements ;}

3. array. filter ();
// Use the specified function to test all elements and create a new array containing all elements that pass the test.

// 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 shoshould Object. defineProperty at // the next index, as push can be affected by // properties on Object. prototype and Array. prototype. // But that method's new, and collisions shoshould be // rare, so use the more-compatible alternative. if (fun. call (thisArg, val, I, t) res. push (val) ;}} return res ;};}

4. array. forEach ();
// Traverse the Array

// Compatible with the old environment // Production steps of ECMA-262, Edition 5, 15.4.4.18 // Reference: http://es5.github.io/#x15.4.4.18if (! Array. prototype. forEach) {Array. prototype. forEach = function (callback, thisArg) {var T, k; if (this = null) {throw new TypeError ('this is null or not defined ');} // 1. let O be the result of calling toObject () passing the // | this | value as the argument. var O = Object (this); // 2. let lenValue be the result of calling the Get () internal // method of O with the argument "length ". // 3. let len be toUint32 (lenValue ). var len = O. length >>> 0; // 4. if isCallable (callback) is false, throw a TypeError exception. // See: http://es5.github.com/#x9.11 If (typeof callback! = "Function") {throw new TypeError (callback + 'is not a function');} // 5. if thisArg was supplied, let T be thisArg; else let // T be undefined. if (arguments. length> 1) {T = thisArg;} // 6. let k be 0 k = 0; // 7. repeat, while k <len while (k <len) {var kValue; //. let Pk be ToString (k ). // This is implicit for LHS operands of the in operator // B. let kPresent be the result of calling the HasProperty // internal method of O with argument Pk. // This step can be combined with c // c. if kPresent is true, then if (k in O) {// I. let kValue be the result of calling the Get internal // method of O with argument Pk. kValue = O [k]; // ii. call the Call internal method of 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. register an event
. AddEventListener = function (type, listener, useCapture ){};
// Name of the first parameter event
// Second parameter event processing function (listener)
// Capture false bubbles with the third parameter true
// Supported only after IE9
// Compatible with the old environment

Var EventTools = {addEventListener: function (element, eventName, listener) {// ability to detect if (element. addEventListener) {element. addEventListener (eventName, listener, false);} else if (element. attachEvent) {element. attachEvent ("on" + eventName, listener);} else {element ["on" + eventName] = listener ;}}, // to remove an event, you cannot use the anonymous function removeEventListener: function (element, eventName, listener) {if (element. removeEventListener) {element. removeEventListener (eventName, listener, false);} else if (element. detachEvent) {// register before IE8. attachEvent and removal event. detachEvent element. detachEvent ("on" + eventName, listener);} else {element ["on" + eventName] = null ;}}};

6. event object
1) event parameter e is the event object, Standard Acquisition Method
Btn. onclick = function (e ){}
2) e. eventPhase event phase, which was not supported by IE8
32.16e.tar get is always the object that triggers the event (click the button)
I) srcElement before IE8
Ii) browser compatibility
Var target = e.tar get | window. event. srcElement;

// GetEvent: function (e) {return e | window. event; // Standard Acquisition Method of e event object; window. method for obtaining event objects before event IE8} // compatible with target getTarget: function (e) {return e.tar get | e. srcElement ;}

7. Get the cursor position on the page
① Position in the visible area: e. clientX e. clientY
② Position in the document:
I) e. pageX e. pageY
Ii) browser compatibility

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var pageY = e.clientY + scrollTop;

8. Get the Page scrolling distance

// Compatible with the browser var scrollTop = document.doc umentElement. scrollTop | document. body. scrolltop;

9. Cancel Text Selection

// Compatible with the browser window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty ();

[Conclusion] This is just a summary. In actual development, there will also be various browser compatibility issues. Different browsers may encounter different adaptation problems on PCs and mobile phones. These issues need to be further explored and summarized by children's shoes ~~ I hope this will help you. If you have any shortcomings, please kindly advise ~~~

The above analysis of the compatibility of browsers in JavaScript is all the content shared by the editor. I hope to give you a reference and support for the script.