名前付き要素 ID は JavaScript グローバルとして参照可能

var el = querySelector("#cool");

  
    window.foo = "bar";
  


  
I won't override window.foo
  
    console.log(window.foo); // Prints "bar"
  

I will be overridden :(

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

を無効にすることで競合が発生します。 alert API。 この保護技術は、あなたが私のような人なら、これについて初めて学ぶ理由である可能性が非常に高い.

名前付きグローバルに対するケース

先ほど、グローバルな名前付き要素を参照として使用することは最善のアイデアではないかもしれないと述べました。 それにはたくさんの理由がありますが、 TJ VanToll は彼のブログでうまくカバーしています ここで要約します。

• DOM が変更されると、参照も変更されます。 それは本当に「もろい」ものを作ります（仕様の用語 そのために) HTML と JavaScript の間の関心の分離が多すぎるかもしれないコード。
• 偶発的な参照はあまりにも簡単です。 単純なタイプミスが、名前付きグローバルを参照することになり、予期しない結果をもたらす可能性があります。
• ブラウザでは実装方法が異なります。 たとえば、アンカーにアクセスできる必要があります id —例 — ただし、一部のブラウザー (つまり、Safari と Firefox) は ReferenceError コンソールで。
• あなたの思い通りにならないかもしれません。 仕様によると、DOM に同じ名前の要素のインスタンスが複数ある場合、たとえば、

  — ブラウザは HTMLCollection インスタンスの配列で。 ただし、Firefox は最初のインスタンスのみを返します。 また、 スペックによると の XNUMX つのインスタンスを使用する必要があります。 id とにかく要素のツリーで。 しかし、そうすることで、ページの動作やそのようなものが停止することはありません。

• たぶん、パフォーマンスコストがありますか？ つまり、ブラウザはその参照リストを作成して維持する必要があります。 何人かの人々がテストを実行しました この StackOverflow スレッドで、名前付きグローバルが実際にあった場所 XNUMX 回のテストでより高いパフォーマンスを発揮 および 最近のテストではパフォーマンスが低下.

その他の考慮事項

名前付きグローバルの使用に対する批判を片付けて、とにかくそれらを使用するとしましょう。 大丈夫だよー。 しかし、あなたがそうするように考慮したいことがいくつかあります。

ポリフィル

エッジケースのように聞こえるかもしれませんが、これらのタイプのグローバル チェックは、ポリフィルの一般的なセットアップ要件です。 new を使用して Cookie を設定する次の例を確認してください。 CookieStore API、まだサポートしていないブラウザーでポリフィルします。

  
  
    // Polyfill the CookieStore API if not yet implemented.
    // https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
    if (!window.cookieStore) {
      window.cookieStore = myCookieStorePolyfill;
    }
    cookieStore.set("foo", "bar");
  

このコードは Chrome では問題なく動作しますが、Safari では次のエラーがスローされます。

TypeError: cookieStore.set is not a function

Safari は、 CookieStore この記事の執筆時点での API。 その結果、ポリフィルは適用されません。 img 要素 ID は、 cookieStore グローバル

JavaScript API の更新

状況をひっくり返して、ブラウザーの JavaScript エンジンを更新すると、名前付き要素のグローバル参照が壊れる可能性があるという別の問題を見つけることができます。

例：

  
  
    window.BarcodeDetector.focus();
  

そのスクリプトは入力要素への参照を取得し、呼び出します focus() その上で。 正しく動作します。 それでも、方法はわかりません 長い それは働き続けます。

入力要素を参照するために使用しているグローバル変数は、ブラウザがサポートを開始するとすぐに機能しなくなります。 BarcodeDetector API。 その時点で、 window.BarcodeDetector global は入力要素への参照ではなくなり、 .focus() をスローしますwindow.BarcodeDetector.focus は関数ではありません」エラー。

おまけ: すべての名前付き要素がグローバル参照を生成するわけではありません

面白いことを聞きたいですか？ さらにひどいことに、名前に文字しか含まれていない場合にのみ、名前付き要素にグローバル変数としてアクセスできます。 ブラウザは、特殊文字と数字を含む ID を持つ要素のグローバル参照を作成しません。 hello-world および item1.

まとめ

ここにたどり着いた方法を要約しましょう。

• すべての主要なブラウザーは、各 DOM 要素へのグローバル参照を自動的に作成します。 id (または、場合によっては、 name 属性）。
• グローバル参照を介してこれらの要素にアクセスすることは、信頼性が低く、潜在的に危険です。 使用する querySelector or getElementById を代わりにお使いください。
• グローバル参照は自動的に生成されるため、コードに副作用が生じる場合があります。 これは、 id あなたが本当にそれを必要としない限り、属性。

結局のところ、JavaScript で名前付きグローバルを使用しないことはおそらく良い考えです。 それがどのように「壊れやすい」コードにつながるかについて、以前に仕様を引用しましたが、ここに要点を強調するための全文があります。

原則として、これに依存するとコードが脆弱になります。 たとえば、Web プラットフォームに新しい機能が追加されると、どの ID が最終的にこの API にマッピングされるかが変わる可能性があります。 これの代わりに、 document.getElementById() or document.querySelector().

HTML 仕様自体が、この機能を避けることを推奨しているという事実は、それ自体が物語っていると思います。