js DOM 要素 ID はグローバル変数 _DOM です

標準仕様

HTML5 仕様文書 は次のように指摘しています: 要素が次の 2 つのルールのいずれかを満たしている場合、window オブジェクトには対応する属性が必要であり、その属性値はこのオブジェクトです。

• 要素に ID 属性がある場合、ID 属性の属性値がウィンドウ オブジェクトの属性名になります。
• 要素に name 属性がある場合、name 属性の属性値は window オブジェクトの属性名になります。ただし、この要素のタグ名は、a、applet、area、embed、form、frame でなければなりません。 、フレームセット、iframe、img、オブジェクト、それらのいずれか。

例を見てみましょう。ID 属性「foo」を持つ div 要素が含まれるページがあるとします。

コードをコピーします コードは次のとおりです:

このようにして、上記の div 要素には、window.foo (他のウィンドウ プロパティと同様) またはグローバル変数 foo を介してアクセスできます。たとえば、Chrome コンソールでは、

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

> ウィンドウ
true
> ; foo

Firefox

コードをコピーします。 コードは次のとおりです。 in window false

> typeof foo // このグローバル変数は存在しますか?

object
// エラー コンソールは次の警告を出力します。// グローバル スコープ内の ID/NAME によって参照される要素.
//代わりに W3C 標準 document.getElementById() を使用します。

> foo
[object HTMLDivElement]
// エラー コンソールは次の警告を出力します。// によって参照される要素グローバル スコープの ID/NAME。
//代わりに W3C 標準 document.getElementById() を使用します。> ウィンドウ true

コードをコピー

コードは次のとおりです:> ウィンドウ内の "foo" false

> typeof foo / / このグローバル変数は存在しますか?

オブジェクト
//エラー コンソールは次の警告を出力します。//グローバル スコープ内の ID/NAME によって参照される要素。
//W3C 標準ドキュメントを使用します。代わりに。

> foo
[object HTMLDivElement]
//エラー コンソールは次の警告を出力します。//グローバル スコープ内の ID/NAME によって参照される要素です。//W3C 標準ドキュメントを使用します。 () 代わりに> ウィンドウ true

何が起こっているのでしょうか? 初期化時には、window には属性 foo がありませんが、この属性が初めて (window.foo 属性を通じて、またはグローバル変数 foo を通じて) アクセスされると、自動的に設定されます。

翻訳者注: Firefox14、15、18 では警告は見つかりませんでしたが、Firefox12 をテストすると確かに警告がありました。

[注: 例のコードは、Web ページの スクリプト タグ
を通じて実行される場合にのみ有効であり、ターミナルを通じて実行することはできません。これは、ターミナルがグローバルを処理するときに異なるメソッドを使用するためです。オブジェクト。]

翻訳者注: Firebug で例のコードを試してみましたが、違いは見つかりませんでした。

foo

の値を読み取ろうとすると、div 要素は通常どおり返されますが、明らかにそのようなことをすべきではないという警告がエラー コンソールに表示されます。警告は正しいです: この機能はターミナルでデバッグするときに使用できますが、実際のコードでは使用しないでください。

Cody Lindley は、グローバル変数を介して

foo にアクセスする と

window.foofoo を比較するための jsPerf テスト を作成しました。 🎜> のパフォーマンスの違い。興味深いことに、Firefox での window.foo へのアクセスのみが高速です。