ホームページ  >  記事  >  ウェブフロントエンド  >  各種ブラウザ_JavaScriptスキルによるdocument.getElementByIdとその他のメソッドの実装の差異の分析

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

WBOY
WBOYオリジナル
2016-05-16 17:10:361034ブラウズ

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);

// 修復後、$ に値を代入すると、$ は通常どおり使用できるようになります。
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 は実行できますが、他のブラウザはエラーを報告します


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。