名前付き要素IDは、JavaScript Globalsとして参照できます

知っていますか？ IDを持つDOM要素は、JavaScriptのグローバル変数としてアクセスできますか？これは長い間存在してきた機能ですが、私は初めてそれを掘り下げてきました。

この機能について最初に聞いたことがある場合は、準備してください！ HTMLの要素にIDを追加するだけで、実際にどのように適用されるかがわかります。

<div id="cool"></div>

通常、

またはquerySelector("#cool")を使用して、新しい変数を定義して要素を選択します。 getElementById("cool")

しかし、実際、これらの扱いにくい操作なしで

var el = querySelector("#cool");

にアクセスできます：

したがって、#cool htmlのid（またはname属性）は、JavaScriptで

を使用してアクセスできます。繰り返しますが、これは「新しい」機能ではありませんが、まれです。

あなたが推測したかもしれないように、window[ELEMENT_ID]名前が付けられた参照を使用してグローバルなスコープにアクセスすることは最良の解決策ではありません。一部の人々はそれを「グローバルスコープ汚染者」と呼んでいます。理由を探りますが、最初は...

いくつかの背景

このメソッドは、「ウィンドウオブジェクトへのアクセスと呼ばれる」と表現するHTML仕様で説明されています。

Internet Explorerは、この機能を実装する最初のブラウザです。他のブラウザがこの機能を追加しました。当時、Geckoは標準モードで直接サポートしていないが、実験機能として使用することを選択した唯一のブラウザでした。人々はそれを実装することをためらっていましたが、ブラウザの互換性のために最終的に進んで（GeckoはWebKitに標準モードから削除するよう説得しようとしました）、最終的にFirefox 14で標準モードに入りました。

おそらくあまり知られていないのは、ブラウザが生成されたグローバル変数がWebページを破壊しないようにするために、いくつかの予防策（さまざまなレベルの成功）を取る必要があることです。対策の1つは...

です

可変閉塞

この機能の最も興味深い部分は、名前付き要素参照が既存のグローバル変数を不明瞭にしないことです。したがって、DOM要素のIDがグローバル変数として定義されている場合、既存の変数を上書きしません。たとえば、

window.foo = "bar";

<div id="foo">I won't override window.foo</div>

スーパーVersa：

console.log(window.foo); // 输出 "bar"

<div id="foo">I will be overridden :(</div>

この動作は、

window.foo = "bar";
console.log(window.foo); // 输出 "bar"

などの危険なカバレッジを排除するため、重要です。、それ以外の場合は、アラートAPIを無効にすることにより競合を引き起こします。この保護技術は、あなたが（あなたが私のようであれば）最初にそれについて学ぶ理由である可能性が最も高いです。

グローバル変数の命名に反する

記事

私は、参照として指定されたグローバル要素を使用することは最良の解決策ではないかもしれないと以前に言いました。多くの理由があり、TJ Vantollは彼のブログでこれについて非常によく詳しく説明しています。私はここでそれを要約します：

• DOMが変更された場合、参照も変更されます。 これにより、コードは非常に「虚弱」（仕様の用語）になり、HTMLとJavaScriptの間の懸念の分離は厳しすぎる可能性があります。
• 偶発的な引用は簡単すぎます。 シンプルなタイプミスは、おそらく名前付きグローバル変数を指す可能性が高く、予期しない結果をもたらします。
• 実装方法は、ブラウザごとに異なります。たとえば、 IDS（例： <a><code><a></a>）でアンカーにアクセスできるはずですが、一部のブラウザ（SafariとFirefox）はコンソールのリファレンスエラーを返します。
• それが生じると思われるものを返さないかもしれません。 仕様によれば、DOM内に同じ名前の要素の複数のインスタンスがある場合（たとえば、2つの <div><code><div>インスタンスなど）、ブラウザはこれらのインスタンスの配列を含むhtmlcollectionを返す必要があります。ただし、Firefoxは最初のインスタンスのみを返します。繰り返しますが、仕様では、要素ツリーでIDインスタンスを使用する必要があると述べています。しかし、そうすることでは、ページが機能することを妨げません。 <li> <strong>可能なパフォーマンスコスト？ </strong>つまり、ブラウザはその参照リストを作成して維持する必要があります。一部の人々は、StackoverFlowスレッドでテストを実行しています。このスレッドでは、名前付きグローバル変数が実際に1つのテストでより良いパフォーマンスを発揮し、最近のテストでは低くなります。 </li> <h3 id="その他の予防策">その他の予防策</h3> <p>指定されたグローバル変数の使用に対する批判を放棄し、それらを使用し続けるとします。ではごきげんよう。ただし、これを行うときに考慮したいことがいくつかあります。 </p> <h4 id="polyfills">polyfills </h4> <p>は極端に聞こえるかもしれませんが、これらのタイプのグローバルチェックは、ポリフィルの典型的なセットアップ要件です。次の例をチェックして、新しいCoicieTore APIを使用してCookieを設定し、まだサポートしていないブラウザでポリフィージーします。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div id=&quot;cool&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>このコードはChromeで正常に動作しますが、Safariでは次のエラーをスローします。 <p> </p>執筆時点では、SafariはCociteTore APIをサポートしていません。したがって、IMG要素IDがCociteToreグローバル変数と競合するグローバル変数を作成するため、PolyFillは適用されません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var el = querySelector(&quot;#cool&quot;);</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>javaScript APIアップデート</p> <h4 id="状況を変更して-別の問題を見つけることができます-つまり-ブラウザのJavaScriptエンジンの更新により-指定された要素のグローバルな参照が破損する場合があります">状況を変更して、別の問題を見つけることができます。つまり、ブラウザのJavaScriptエンジンの更新により、指定された要素のグローバルな参照が破損する場合があります。 </h4> <p>例：</p> <p> </p>このスクリプトは、入力要素を参照し、Focus（）を呼び出します。正常に動作します。ただし、どれくらいの期間機能するかわかりません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">window.foo = &quot;bar&quot;;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>ブラウザがBarcodedetector APIをサポートしていることを開始すると、入力要素を参照するために使用するグローバル変数が動作を停止することがわかります。その時点で、window.barcodedetectorグローバル変数は入力要素への参照ではなくなり、.focus（）は「window.barcodedeTector.focusは関数ではありません」エラーをスローします。 </p> <h3 id="結論">結論</h3> <p>この点にどのように到達したかを要約しましょう：</p> <ul> <li>すべての主要なブラウザは、IDを使用して各DOM要素へのグローバル参照を自動的に作成します（または場合によっては名前属性）。 </li> グローバルな参照を介してこれらの要素にアクセスすることは信頼できず、危険な場合があります。代わりに<li>または<code>querySelectorを使用してください。 getElementById
グローバル参照は自動的に生成されるため、コードに何らかの副作用がある場合があります。これは、必要な場合を除き、ID属性を使用しないようにする正当な理由です。

最終的には、JavaScriptで指名されたグローバル変数の使用を避けることをお勧めします。私は以前に「虚弱」コードを引き起こす仕様についての仕様が言っていることを引用しましたが、これを強調する全文は次のとおりです。

一般的に言えば、これに依存すると、壊れやすいコードにつながります。たとえば、新しい機能がWebプラットフォームに追加されるため、最終的にはこのAPIに時間の経過とともにマッピングされる可能性があります。これを行わないでください、

または

を使用してください。 document.getElementById() document.querySelector()

HTML仕様自体は、この機能を避けることをすべて避けることを示唆していると思います。