各種ブラウザ_JavaScriptスキルによるdocument.getElementByIdとその他のメソッドの実装の差異の分析

Web フロントエンドの同僚は全員、document.getElementById に精通しています。開発プロセスでは、xx というページ ID を持つ要素を取得するために使用する必要があることがよくあります。ベテランの JS ライブラリ Prototype が普及して以来、誰もが

のように略します。 コードをコピーします コードは次のとおりです。

// メソッド 1
function $(id){ return document.getElementById(id);なぜ次のように書くのではなく、このように書くのか考えたことはありますか?

コードをコピー コードは次のとおりです: // メソッド 2

var $ = document.getElementById;

このように $ を記述すると、ドキュメント メソッド getElementById を変数 $ に代入し、$ を使用して xx のページ ID を持つ要素を取得できます。実際、方法 2 は IE6/7/8 では実行可能ですが (IE9 ではいくつかの変更があります)、Firefox/Safari/Chrome/Opera では実行できません。ご自身でもテストしてみてください。

Firefox/Safari/Chrome/Opera は方法 2 で取得できないのはなぜですか? その理由は、これらのブラウザーの getElementById メソッドの内部実装はこれ (ドキュメント) に依存する必要があるのに対し、IE ではこれを必要としないためです。 。つまり、方法 2 は、Firefox/Safari/Chrome/Opera で呼び出すときにこれが欠落していることを示しています。以下は簡単な例です。

コードをコピー コードは次のとおりです: // 関数を定義します show function show(){alert(this.name);}

// 定義します名前属性を持つ p オブジェクト
var p = {name:'Jack'} // ->show(); > ''
show.call(null) // -> ''


show の実装がこれに依存していることがわかります。メソッド本体で使用されている）のため、呼び出し環境（実行コンテキスト）にname属性が無い場合、期待した結果が得られません。
言い換えると、IE6/7/8 は document.getElementById の実装時にこれを使用しませんが、IE9/Firefox/Safari/Chrome/Opera ではこれを使用する必要があります。ここで、これはドキュメント オブジェクトです。メソッド2を直接呼び出した場合、内部のthisはwindowオブジェクトとなるため、メソッド2ではFirefox/Safari/Chrome/OperaのIDを元に要素を正常に取得することができません。

document.getElementByIdの実行環境をwindowではなくdocumentに変更すると普通に$が使えるようになります。次のように

コードをコピーします

コードは次のとおりです:

// document.getElementById を修正しますdocument.getElementById = (function(fn){ return function(){ return fn.apply(document,arguments); };

})(document.getElementById);

// 修復後、$ に値を代入すると、$ は通常どおり使用できるようになります。
var $ = document.getElementById;


また、関数の新しいバインド メソッドです。 ECMAScript5 でも同じ効果を実現できます




コードをコピー

コードは次のとおりです:

//方法 3 var $ = document.getElementById .bind(document); ただし、現在、方法 3 は IE9/Firefox/Chrome/ でのみサポートされています。

getElementById の状況を分析すると、さまざまなブラウザーでの次のメソッドの違いの理由が簡単に理解できます

コードをコピー

コードは次のとおりです:

var prinf = document.write; prinf('

Test prinf

'); // IE6/7/8実行可能、他のブラウザはエラーを報告 var prinfln = document.writeln; prinfln('

Test prinfln

'); // IE6/7/8 は実行可能、その他ブラウザはエラーを報告します

var reload = location.reload;
reload(); // IE6/7/8 は実行できますが、他のブラウザはエラーを報告します

var go =history.go;
go(-2); // IE6/7/8 は実行できますが、他のブラウザはエラーを報告します