ブラウザの互換性の問題は無視しやすいが、実際の開発において最も重要な部分です。ブラウザの古いバージョンの互換性の問題について話す前に、まず機能の検出とは何かを理解する必要があります。ブラウザにそのような機能があるかどうか、つまり、現在のブラウザが呼び出される属性またはメソッドをサポートするかどうかを判断することです。ここにいくつかの簡単な紹介があります。
1。インターテキストと内部コンテンツ
1）InnertextとInnerContentの機能は同じです
2）IE8前のInnerTextブラウザのサポート
3）Firefoxサポートの内部コンテンント古いバージョン
4）ブラウザの新しいバージョンは両方の方法をサポートしています
1 //ブラウザの古いバージョンはInnerTextとInnerContent2と互換性がありますif（element.textContent）{3 return element.textcontent; 4} else {5 return element.innertext; 6}2。兄弟ノード/要素の互換性の問題を取得します
1）ブラザーノード、すべてのブラウザがサポートしています
次の兄弟ノードを描写します。これは、非エレメントノードである可能性があります。テキストノードが取得されます
offering前後の兄弟ノードは、非エレメントノードである可能性があります。テキストノードが取得されます
2）兄弟の要素、IE8は以前にサポートしていませんでした
①前のレミスの前の次の兄弟要素を入手し、空白を無視します
[nextelementsibling次の隣接する兄弟要素を取得し、空白を無視します
//互換性のあるブラウザ//次の兄弟要素関数getNextElement（element）{//機能検出if（element.nextelementsibling）{return element.nextelementsibling; } else {var node = element.nextsibling; while（node && node.nodeType！== 1）{node = node.nextibling; }ノードを返します。 }} /***前の要素を返す*@param要素*@returns {*}*/function getPreviousElement（element）{if（element.PreviousElementsibling）{return element.previouselementionbling; } else {var el = element.previoussibling; while（el && el.nodetype！== 1）{el = el.previoussibling; } 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; } 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; } eLを返します。 }} /***現在の要素のすべての兄弟要素を取得*@param要素*@returns {array}*/function sibling（element）{if（！element）return; var Elements = []; var el = element.previoussibling; while（el）{if（el.nodetype === 1）{elemention.push（el）; } el = el.previoussibling; } el = element.previoussibling; while（el）{if（el.nodetype === 1）{elemention.push（el）; } el = el.nextsibling; } el = element.previoussibling; } return elements;}3。ARRAY.FILTER（）;
//指定された関数ですべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します
//古い環境と互換性があるif（！array.prototype.filter）{array.prototype.filter = function（fun/ *、thisarg */）{"surtict"; if（this === void 0 || this === null）new TypeError（）; var t = object（this）; var len = t.length >>> 0; if（typeof fun！== "function"）new TypeError（）; var res = []; var thisarg = arguments.length> = 2？引数[1]：void 0; for（var i = 0; i <len; i ++）{if（i in t）{var val = t [i]; //注：技術的には、これはobject.defineProperty at //次のインデックスで、プッシュはObject.prototypeおよびarray.prototypeの//プロパティによって影響を受ける可能性があります。 //しかし、その方法は新しいものであり、衝突は//まれである必要があるため、より互換性のある代替品を使用してください。 if（fun.call（thisarg、val、i、t））res.push（val）; }} RESを返します。 };}4。ARRAY.FOREACH（）;
//トラバースアレイ
//古い環境と互換性がありますif（this == null）{new TypeError（ 'これはnullまたはdefinded'）; } // 1。oを呼び出してtoobject（）を通過した結果とします。// | this |議論としての価値。 var o = object（this）; //2。Lenvalueを、引数「長さ」でget（）内部// oのメソッドを呼び出す結果とします。 //3。Lenをtouint32（Lenvalue）とします。 var len = o.length >>> 0; //4。ISCallable（コールバック）がfalseの場合、TypeRror例外をスローします。 //参照：http：//es5.github.com/#x9.11 if（typeof callback！== "function"）{throw new TypeError（callback + 'is no a function'）; } //5。Thisargが供給された場合、tをthisargとします。それ以外の場合、// tを未定義にします。 if（arguments.length> 1）{t = thisarg; } //6。Kとします0 k = 0; //7。繰り返し、while k <len while（k <len）{var kvalue; // a。 pkをtostring（k）とします。 //これは、in operatorのLHS演算子にとって暗黙的です// b。 kpresentを、HasProperty // Oの内部メソッドを引数PKで呼び出した結果とします。 //このステップはc // cと組み合わせることができます。 kpresentが真である場合、if（k in o）{// i。 kValueを、引数pkを使用してget内部// oのメソッドを呼び出した結果とします。 kvalue = o [k]; // ii。 tasを使用してコールバックの内部メソッドを呼び出す// kvalue、k、およびO. callback.call（t、kvalue、k、o）を含むこの値と引数リスト。 } // d。 Kを1。K++増加させます。 } // 8。undefinedを返す};}5。登録イベント
.addeventListener = function（type、listeren、usecapture）{};
//最初のパラメーターイベント名
// 2番目のパラメーターイベントハンドラー関数（リスナー）
// 3番目のパラメーターは誤ったバブルをキャプチャします
// IE9の後にのみサポートされます
//古い環境と互換性があります
var eventTools = {addeventListener：function（element、eventname、listerer）{//容量検出if（element.addeventlistener）{element.addeventlistener（eventname、ristener、false）; } else if（element.attachevent）{element.attachevent（ "on" + eventname、ristener）; } else {element ["on" + eventName] =聴取者; }}、//イベントを削除する場合、匿名関数を使用することはできませんremoveEventListener：function（element、eventname、listerer）{if（element.removeeventlistener）{element.removeeventlistener（eventname、ristener、false）; } else if（element.detachevent）{// ie8登録前にattacheventおよび削除event.detachevent element.detachevent（ "on"+eventname、リスナー）; } else {element ["on" + eventName] = null; }}};6。イベントオブジェクト
1）イベントパラメーターEはイベントオブジェクト、標準取得方法です
btn.onclick = function（e）{}
2）E.EventPhaseイベント段階、IE8は以前にそれをサポートしていませんでした
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の前にイベントオブジェクトを取得する方法} //ターゲットgettargetと互換性：function（e）{return e.target || E.SRCELEMENT; }7.ページ上のマウスの位置を取得します
visual視覚領域の位置：E.ClientX E.Clienty
documentドキュメント内の場所：
i）e.pagex e.pagey
ii）ブラウザ互換
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;
8。スクロールする距離を取得します
//互換性のあるブラウザーvar scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
9.テキストの選択をキャンセルします
//ブラウザwindow.getSelectionと互換性がありますか？ window.getSelection（）。removeallranges（）：document.selection.empty（）;
[概要]これは単なる部分的な要約であり、実際の開発中にさまざまなブラウザの互換性の問題にも遭遇します。また、さまざまなブラウザは、PCや携帯電話でさまざまな適応の問題に遭遇します。これらは、子供の靴が発見して要約するのを待っています~~それがあなたを助けることができることを願っています。欠点についてアドバイスを教えてください~~~
JavaScriptのブラウザの互換性の問題に関する上記の簡単な分析は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。