브라우저 호환성 문제는 간과되기 쉽지만 실제 개발에 있어서 가장 중요한 부분입니다. 이전 버전의 브라우저와의 호환성 문제에 대해 이야기하기 전에 먼저 브라우저에 이 기능이 있는지 감지하는 데 사용됩니다. 즉, 현재 브라우저가 해당 속성이나 메서드를 지원하는지 확인하는 데 사용됩니다. 라고 불리는. 다음은 몇 가지 간략한 소개입니다.
1.innerText 및 innerContent
1) innerText와 innerContent는 동일한 기능을 갖습니다
2) innerText는 IE8 이전의 브라우저에서 지원됩니다
3) innerContent는 이전 버전의 Firefox에서 지원됩니다
4) 새 버전의 브라우저는 두 가지 방법을 모두 지원합니다
1 // 老版本浏览器兼容 innerText 和 innerContent 2 if (element.textContent) { 3 return element.textContent ; 4 } else { 5 return element.innerText; 6 }
2. 형제 노드/요소 획득 시 호환성 문제
1) 브라더 노드, 모든 브라우저 지원
①nextSibling 다음 형제 노드는 요소가 아닌 노드일 수 있습니다.
가 획득됩니다.
②previousSibling 이전 형제 노드는 요소가 아닌 노드일 수 있습니다. 텍스트 노드
를 얻습니다.
2) Brother 요소, IE8은 이전에 지원하지 않았습니다
①previousElementSibling 이전 형제 요소를 가져오고 공백을 무시합니다
②NEXTELEMENTSIBLING은 다음 이웃 형제 요소를 얻으려면 공백을 무시합니다
//兼容浏览器 // 获取下一个紧邻的兄弟元素 function getNextElement(element) { // 能力检测 if(element.nextElementSibling) { return element.nextElementSibling; } else { var node = element.nextSibling; while(node && node.nodeType !== 1) { node = node.nextibling; } return node; } }
/** * 返回上一个元素 * @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; } }
/** * 返回第一个元素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; } }
/** * 返回最后一个元素 * @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; } }
/** *获取当前元素的所有兄弟元素 * @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. 배열.필터()
// 지정된 함수를 사용하여 모든 요소를 테스트하고 테스트를 통과한 모든 요소를 포함하는 새 배열을 만듭니다.
// 兼容旧环境 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();
// 배열 탐색
//兼容旧环境 // 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 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 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. 등록 이벤트
.addEventListener = 함수(유형,리스너,useCapture) { };
//첫 번째 매개변수 이벤트 이름
//두 번째 매개변수 이벤트 처리 함수(리스너)
//세 번째 매개변수 true는 거짓 버블링을 캡처합니다.
//IE9 이후에만 지원
// 기존 환경과 호환
var EventTools = { addEventListener: function (element, eventName, listener) { //能力检测 if(element.addEventListener) { element.addEventListener(eventName, listener,false); }else if(element.attachEvent) { element.attachEvent("on" + eventName, listener); }else{ element["on" + eventName] = listener; } }, // 想要移除事件,不能使用匿名函数 removeEventListener: function (element, eventName, listener) { if(element.removeEventListener) { element.removeEventListener(eventName,listener,false); }else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEvent element.detachEvent("on"+eventName,listener); }else{ element["on" + eventName] = null; } } };
1) 이벤트 매개변수 e는 이벤트 객체, 표준 획득 방식
btn.onclick = 함수(e) { }
2) IE8 이전에는 지원되지 않았던 e.eventPhase 이벤트 단계
3)e.target은 항상 이벤트(클릭된 버튼)를 트리거하는 개체입니다.
i) IE8 srcElement 이전
ii) 브라우저 호환
var target = e.target || window.event.srcElement;
// 获取事件对象 兼容浏览器 getEvent: function(e) { return e || window.event; // e事件对象 标准的获取方式; window.event IE8以前获取事件对象的方式 } // 兼容target getTarget: function(e) { return e.target || e.srcElement; }
①보이는 영역의 위치 : e.clientX e.clientY
②문서 내 위치 :
i) e.pageX e.pageY
ii) 브라우저 호환
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var pageY = e.clientY + scrollTop;
// 兼容浏览器 var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;
// 兼容浏览器 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
위의 JavaScript 브라우저 호환성 문제에 대한 간략한 분석은 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, Script Home을 지원해 주시길 바랍니다.

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
