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 () {
3 return ;
4 } else {
5 return ;
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 brother node, which may be a non-element node; a text node will be obtained
2) Brother elements, IE8 did not support before
① PreviousElementSibling Get the previous next brother element and ignores the blank.
②nextElementSibling Get the next next brother element and ignores the blanks
//Compatible with browser// Get the next next brother elementfunction getNextElement(element) {
// Capability detection if() {
return ;
} else {
var node = ;
while(node && !== 1) {
node = ;
}
return node;
}
}
/**
* Return the previous element
* @param element
* @returns {*}
*/
function getPreviousElement(element) {
if() {
return ;
}else {
var el = ;
while(el && !== 1) {
el = ;
}
return el;
}
}
/**
* Returns the browser compatibility of the first element firstElementChild
* @param parent
* @returns {*}
*/
function getFirstElement(parent) {
if() {
return ;
}else {
var el = ;
while(el && !== 1) {
el = ;
}
return el;
}
}
/**
* Return the last element
* @param parent
* @returns {*}
*/
function getLastElement(parent) {
if() {
return ;
}else {
var el = ;
while(el && !== 1) {
el = ;
}
return el;
}
}
/**
* Get all sibling elements of the current element
* @param element
* @returns {Array}
*/
function sibling(element) {
if(!element) return ;
var elements = [ ];
var el = ;
while(el) {
if( === 1) {
(el);
}
el = ;
}
el = ;
while(el ) {
if( === 1) {
(el);
}
el = ;
}
return elements;
}
3、();
// Test all elements with the specified function and create a new array containing all elements that passed the test
// Compatible with old environmentsif (!)
{
= function(fun /*, thisArg */)
{
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var res = [];
var thisArg = >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++)
{
if (i in t)
{
var val = t[i];
// NOTE: Technically this should at
// the next index, as push can be affected by
// properties on and .
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if ((thisArg, val, i, t))
(val);
}
}
return res;
};
}
4、();
// traverse array
//Compatible with old environment// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: /#x15.4.4.18
if (!) {
= 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 = >>> 0;
// 4. If isCallable(callback) is false, throw a TypeError
exception. // See: /#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 ( > 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 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.
(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
//The second parameter event handler function (listener)
//The third parameter true captures false bubbles
//It will only be supported after IE9
// Compatible with old environments
var EventTools = {
addEventListener: function (element, eventName, listener) {
//Capability detection if() {
(eventName, listener,false);
}else if() {
("on" + eventName, listener);
}else{
element["on" + eventName] = listener;
}
},
// If you want to remove events, you cannot use anonymous functions removeEventListener: function (element, eventName, listener) {
if() {
(eventName,listener,false);
}else if() { //IE8 before registering .attachEvent and removing events.detachEvent. ("on"+eventName,listener);
}else{
element["on" + eventName] = null;
}
}
};
6. Event Object
1) Event parameter e is the event object, the standard acquisition method
= function(e) { }
2) Event stage, IE8 did not support it before
3) Always the object that triggers the event (clicked button)
i) srcElement before IE8
ii) Browser compatible
var target = || ;
// Get event object compatible with browser getEvent: function(e) {
return e || ; // eEvent object Standard acquisition method; the method of obtaining event objects before IE8 }
// Compatible with target getTarget: function(e) {
return || ;
}
7. Get the mouse position on the page
① Position in the visual area:
② Location in the document:
i）
ii) Browser compatible
var scrollTop = || ; var pageY = + scrollTop;
8. Get the distance to scroll
// Compatible with browser var scrollTop = || ;
9. Cancel the selection of text
// Compatible with browser ? ().removeAllRanges() : ();
[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 me more.