Browser compatibility issues are an easy to ignore but most important part in actual development. Before we talk about the compatibility issues of old versions of browsers, we must first understand what capability detection is. It is to detect whether the browser has such capabilities, that is, to determine whether the current browser supports the attributes or methods to be called. Here are some brief introductions.
1. innerText and innerContent
1) The functions of innerText and innerContent are the same
2) InnerText browser support before IE8
3) innerContent Old version of Firefox support
4) The new version of the browser supports both methods
1 // Old version of browsers are compatible with innerText and innerContent2 if (element.textContent) {3 return element.textContent ;4 } else {5 return element.innerText;6 }2. Get compatibility issues of brother nodes/elements
1) Brother nodes, all browsers support
①nextSibling The next brother node, which may be a non-element node; a text node will be obtained
② PreviousSibling The previous sibling node may be a non-element node; the text node will be obtained
2) Brother elements, IE8 did not support before
① previousElementSibling Get the previous next brother element and ignores the blanks
②nextElementSibling Get the next adjacent sibling element and ignores the blanks
//Compatible browser// Get the next next 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; } } /*** Return 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; }} /*** 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.previousSibling; } 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.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; } el = element.previousSibling; } return elements;}3. array.filter();
// Test all elements with the specified function and create a new array containing all elements that passed the test
// Compatible with 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 be affected by // properties on Object.prototype and Array.prototype. // But that method's new, and collisions should be // rare, so use the more-compatible alternative. if (fun.call(thisArg, val, i, t)) res.push(val); } } return res; };}4. array.forEach();
// traverse array
//Compatible with old environments// 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; // a. Let Pk be ToString(k). // This is implicit for LHS operators 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. Registration Event
.addEventListener = function (type,listener,useCapture ) { };
//The first parameter event name
//The second parameter event handler function (listener)
//The third parameter true captures false bubble
//It will only be supported after IE9
// Compatible with old environments
var EventTools = { addEventListener: function (element, eventName, listener) { //Capacity detection if(element.addEventListener) { element.addEventListener(eventName, listener,false); }else if(element.attachEvent) { element.attachEvent("on" + eventName, listener); }else{ element["on" + eventName] = listener; } },// If you want to remove events, you cannot use the anonymous function removeEventListener: function (element, eventName, listener) { if(element.removeEventListener) { element.removeEventListener(eventName,listener,false); }else if(element.detachEvent) { //IE8 before registering.attachEvent and removing events.detachEvent element.detachEvent("on"+eventName,listener); }else{ element["on" + eventName] = null; } } };6. Event Object
1) Event parameter e is the event object, the standard acquisition method
btn.onclick = function(e) { }
2) e.eventPhase event stage, IE8 did not support it before
3) e.target is always the object that triggers the event (clicked button)
i) Before IE8 srcElement
ii) Browser compatible
var target = e.target || window.event.srcElement;
// Get event object compatible with browser getEvent: function(e) { return e || window.event; // Standard way of obtaining e event object; window.event The way to obtain event object before IE8}// Compatible with target getTarget: function(e) { return e.target || e.srcElement; }7. Get the mouse position on the page
① Position in the visual area: e.clientX e.clientY
② Location 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 distance to scroll
// Compatible browser var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;
9. Cancel the selection of text
// Compatible with browser window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty();
[Summary] This is just a partial summary, and you will also encounter various browser compatibility problems during actual development. Different browsers will also encounter different adaptation problems on the PC and mobile phones. These are waiting for the children's shoes to discover and summarize~~ I hope it can help you. Please give me some advice on the shortcomings~~~
The above brief analysis of the compatibility issues of browsers in JavaScript is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.