web-dev-qa-db-ja.com

要素のIDをグローバル変数にする必要があるという仕様はありますか?

Chromeに_<div id='a'>_がある場合、JavaScriptではa.stuff()を実行できます(aがグローバル変数であるかのように)。

ただし、これはFireFoxでは機能しません-document.getElementById('a')を使用する必要があります。

正しい動作ここでは何ですか? (つまり、W3仕様によると)

また、IDがaのdivがあり、スクリプトにaというグローバル変数がある場合、Chromeがあいまいさを解決する方法にも興味があります。 。動作はランダムで奇抜なものになりますか?

そして、ハイフン( "-")、コロン( ":")、およびピリオド( "。")で構成されるidを持つ要素はどのように翻訳されますか(わかりました、_document.getElementById_でアクセスできることはわかっていますが、ブラウザはそれをそれらを表していたグローバル変数に変換します)

40
Name

それはあなたが読んだスペックに依存します。 :)

この動作は、HTML4仕様では説明されていません(cf、 http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id および- http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name )。ただし、Internet Explorerによって導入され、互換性のために他の主要なブラウザーにコピーされました。 FireFoxもこの動作を表示しますが、 quirksモード の場合のみです(それでもその実装はバグがあるようです)。

WHATWG HTML仕様は現在 必須 この動作ですが、 未解決のバグ 削除を要求しています。

仕様への準拠に関係なく、アプリケーションコードにグローバル名前空間(つまり、window)を使用することは、一般的に悪い動作と見なされます。 document.getElementById()またはjQueryコンビニエンスメソッド(例:$("#a"))を使用して要素IDを参照し、関数スコープの変数を使用して、グローバル名前空間に新しい変数が導入されないようにすることを検討してください。

WHATWGメーリングリスト で、この動作についてのより長い議論があります。

41
Niall Smart

非常に早い時期から、IEは、名前またはid属性値で要素を参照するグローバル変数を作成しました。これは決して良い考えではありませんでしたが、サイトとの互換性を保つために他のブラウザによってコピーされました。 IE用に作成されました。

これは悪い考えであり、コピーしたり使用したりしないでください。

編集

追加の質問に答えるには:

... IDを持つdivがあり、スクリプトにtooというグローバル変数がある場合、Chromeはあいまいさを解決する方法).

IE(この動作を導入))では、グローバル変数が要素IDまたは名前と同じ名前で宣言されている場合、それが優先されます。ただし、宣言されていないグローバルはそのようには機能しません。 Chrome(私は持っていますが、答えを出すつもりはありません)でそれをテストするのにそれほど時間はかかりません。

また、ハイフン( "-")、コロン( ":")、ピリオド( "。")で構成されるidの要素はどのように翻訳されますか(document.getElementByIdでアクセスできることはわかっていますが、ブラウザーはどのように翻訳しますか)それらを表していたグローバル変数にそれを)

有効な識別子ではないオブジェクトプロパティ名とまったく同じです-角括弧表記(つまり、window ['name-or-id'])。

11
RobG

技術的には、この質問は意見ですが、良い質問です。

IEもこれを行い、一部の人に頭痛の種を引き起こしました。

JavaScriptの変数HTMLのID の命名規則は異なります。これがいかに良いことかわかりません。

たとえば、このページには、IDが「notify-container」の要素があります。これは有効なJavaScript名ではありません。

また、これらの名前はいつバインドされますか?インラインスクリプトが変数を宣言し、要素が後で表示される場合、どちらが優先されますか?

一貫性を持たせることはできません。

3
cgp