JavaScript におけるブラウザ互換性の問題について簡単に説明します

ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換性の問題について話す前に、まず機能検出とは何かを理解する必要があります。これは、ブラウザにこの機能があるかどうかを検出するために、つまり、現在のブラウザが呼び出されるプロパティまたはメソッドをサポートしているかどうかを判断するために使用されます。以下に簡単な紹介をいくつか示します。

1. innerText と innerContent
1) innerTextとinnerContentは同じ機能を持つ
2) innerTextはIE8以前のブラウザでサポートされています
3) innerContent Firefoxの古いバージョンでは
4) 新しいバージョンのブラウザは両方の方法をサポートしています

JavaScriptコードコンテンツをクリップボードにコピー

// 古いバージョンのブラウザは innerText と innerContent と互換性があります
if (要素.textContent) {
element.textContentを返します。
}それ以外{
element.innerTextを返します。
}

2. 兄弟ノード/要素の取得における互換性の問題

1) すべてのブラウザでサポートされているブラザーノード

①nextSibling 次の兄弟ノード。非要素ノードの場合もある。テキストノードが取得される。

②previousSibling 前の兄弟ノード。非要素ノードの場合もある。テキストノードが取得される。

2) 兄弟要素はIE8より前ではサポートされていません

①previousElementSiblingは、空白を無視して、前の隣接する兄弟要素を取得します。

②nextElementSiblingは、空白を無視して次の隣接する兄弟要素を取得します。

JavaScriptコードコンテンツをクリップボードにコピー

//互換性のあるブラウザ
// 次の隣接する兄弟要素を取得します
関数getNextElement(要素) {
// 能力テスト
if (要素.nextElementSibling) {
element.nextElementSiblingを返します。
}それ以外{
varノード = element.nextSibling;
（ノード＆＆ノード.nodeType！== 1）{
ノード = node.nextibling;
}
ノードを返します。
}
}

JavaScriptコードコンテンツをクリップボードにコピー

/**
* 前の要素を返す
* @param要素
* @returns {*}
*/
関数getPreviousElement(要素) {
if (要素.前の要素兄弟) {
element.previousElementSiblingを返します。
}それ以外{
var el = element.previousSibling;
(el && el.nodeType !== 1)の場合{
el = el.previousSibling;
}
el を返します。
}
}

JavaScriptコードコンテンツをクリップボードにコピー

/**
* 最初の要素firstElementChildのブラウザ互換性を返します
* @param 親
* @returns {*}
*/
関数getFirstElement(親) {
親要素の最初の子要素の場合
親.firstElementChildを返します。
}それ以外{
var el = parent.firstChild;
(el && el.nodeType !== 1)の場合{
el = el.nextSibling;
}
el を返します。
}
}

JavaScriptコードコンテンツをクリップボードにコピー

/**
* 最後の要素を返す
* @param 親
* @returns {*}
*/
関数getLastElement(親) {
親要素の最後の子要素の場合
親.lastElementChildを返します。
}それ以外{
var el = parent.lastChild;
(el && el.nodeType !== 1)の場合{
el = el.previousSibling;
}
el を返します。
}
}

JavaScriptコードコンテンツをクリップボードにコピー

/**
* 現在の要素のすべての兄弟要素を取得します
* @param要素
* @returns {配列}
*/
関数兄弟(要素) {
if (!要素) return ;
var要素 = [ ];
var el = element.previousSibling;
一方で（エル）{
el.nodeType === 1 の場合{
要素をプッシュします。
}
el = el.previousSibling;
}
el = 要素.前の兄弟;
一方で（el）{
el.nodeType === 1 の場合{
要素をプッシュします。
}
el = el.nextSibling;
}
要素を返します。
}

3. 配列.filter();

// 指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します

JavaScriptコードコンテンツをクリップボードにコピー

// 古い環境と互換性あり
if (!Array.prototype.filter)
{
Array.prototype.filter = function (fun /*, thisArg */ )
{
「厳密な使用」 ;
( this === void 0 || this === null )の場合
投げる新しいTypeError();
var t = Object( this );
var len = t.length >>> 0;
if (関数の型がfun !== "function" )
投げる新しいTypeError();
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
( var i = 0; i < len; i++)の場合
{
もし（iがtの中にある）
{
var val = t[i];
// 注意: 技術的には、これはObject.definePropertyで
// 次のインデックス、プッシュは影響を受ける可能性がある
// Object.prototype および Array.prototype のプロパティ。
// しかし、このメソッドは新しく、衝突は
// まれなので、より互換性のある代替手段を使用してください。
if (fun.call(thisArg, val, i, t))
res.push(val);
}
}
resを返します。
};
}

4. 配列.forEach();
// 配列を走査する

JavaScriptコードコンテンツをクリップボードにコピー

//古い環境と互換性あり
// ECMA-262、第 5 版、15.4.4.18 の作成手順
// 参考: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
Array.prototype.forEach =関数(コールバック、thisArg) {
var T、k;
もしこれがnullならば
投げる new TypeError( ' これは null または定義されていません' );
}
// 1. OをtoObject()を呼び出して、
// |this| 値を引数として渡します。
var O = Object( this );
// 2. lenValueをGet()内部呼び出しの結果とする
// 引数「length」を持つ O のメソッド。
// 3. lenをtoUint32(lenValue)とします。
var len = O.length >>> 0;
// 4. isCallable(callback) が false の場合は TypeError をスローします
例外。//参照: http://es5.github.com/#x9.11
if (コールバックの型!== "関数" ) {
投げる new TypeError(callback + ' は関数ではありません' );
}
// 5. thisArgが指定された場合はTをthisArgとする。そうでない場合は
// T は未定義です。
引数の長さが1より大きい場合
T = この引数;
}
// 6. kを0とする
0 = 0;
// 7. k < len の間繰り返します
(k < 長さ)の間
var kValue;
// a. Pk を ToString(k) とします。
// これは in 演算子の LHS オペランドに対して暗黙的に行われます
// b. kPresentをHasPropertyの呼び出し結果とする
// 引数 Pk を持つ O の内部メソッド。
// このステップはcと組み合わせることができます
// c. kPresentがtrueの場合、
(kが Oの場合) {
// i. kValueをGet内部呼び出しの結果とする
// 引数 Pk を持つ O のメソッド。
k値 = O[k];
// ii. T を引数としてコールバックの内部メソッド Call を呼び出す
// kValue、k、および O を含む this 値と引数リスト。
コールバック。呼び出し(T、kValue、k、O);
}
// d. k を 1 増やします。
関数
}
// 8. undefined を返す
};
}

5. 登録イベント

JavaScriptコードコンテンツをクリップボードにコピー

.addEventListener = function (type,listener,useCapture) { };
//最初のパラメータイベント名
//2番目のパラメータイベント処理関数（リスナー）
//3番目のパラメータtrueはfalseバブルをキャプチャします
//IE9以降のみサポート
// 古い環境と互換性あり

JavaScriptコードコンテンツをクリップボードにコピー

varイベントツール = {
addEventListener:関数(要素、イベント名、リスナー) {
//能力テスト
要素を追加する場合
element.addEventListener(イベント名、リスナー、 false );
}それ以外要素を添付イベントにする場合
element.attachEvent( "on" + イベント名、リスナー);
}それ以外{
要素[ "on" + イベント名] = リスナー;
}
},
// イベントを削除するには、匿名関数は使用できません
removeEventListener:関数(要素、イベント名、リスナー) {
要素を削除する場合{
element.removeEventListener(イベント名、リスナー、 false );
}それ以外 if (element.detachEvent) { //IE8 は以前に .attachEvent を登録し、イベント .detachEvent を削除しました
element.detachEvent( "on" +イベント名、リスナー);
}それ以外{
要素[ "on" + イベント名] = null ;
}
}
};

6. イベントオブジェクト

1) イベントパラメータeは標準的な方法で取得されるイベントオブジェクトです。

btn.onclick = 関数(e) { }

2) e.eventPhase イベントフェーズ、IE8 より前ではサポートされていません

3) e.target は常にイベントをトリガーしたオブジェクト (クリックされたボタン) です。

i) IE8 以前の srcElement

ii) ブラウザの互換性

var target = e.target || window.event.srcElement;

JavaScriptコードコンテンツをクリップボードにコピー

// ブラウザと互換性のあるイベントオブジェクトを取得します
getEvent:関数(e) {
return e || window.event; // e イベントオブジェクトを取得する標準的な方法。window.event IE8 以前のイベントオブジェクトを取得する方法
}
// ターゲットと互換性あり
getTarget:関数(e) {
e.target || e.srcElementを返します。
}