たった 1 行のコードで document.getElementById_javascript トリックに別れを告げます

したがって、ほとんどのスクリプトでは、要素の ID を介して DOM に直接アクセスします。

その後、さまざまなブラウザが次々と登場し、徐々にIEに取って代わられていきました。すべての宗派が統一されたルールを確実に持つために、標準化の重要性がますます高まっています。 ID に直接アクセスする元のメソッドは、徐々に document.getElementById に置き換えられました。最近でも要素にアクセスするために ID を使用している場合は、プログラムに埋め込み Web ページを作成するか、鉄道省のような超強力なアンティーク Web サイトを使用する必要があります:) もちろん、ユーザーが IE を使用してアクセスするなど、標準的ではありませんが、使用しても問題はありません。

ただし、多くのサードパーティ ブラウザが最初に登場したとき、当時の多数の非標準ページとの互換性を確保するために、ID を使用して DOM にアクセスするという非標準の慣行が残されました。 。実際、今日の主流のブラウザの中で、このアプローチをサポートしていないのは FireFox だけですが、Chrome、Opera、Safari、Mobile Safari はすべてこのアプローチをサポートしています。

この場合、FireFox にもサポートさせて、すべてのブラウザが ID を使用して DOM に直接アクセスできるようにするとよいでしょう。高速で便利なだけでなく、煩雑なコードが削減され、操作効率も向上します。 。

実装は非常に簡単で、ドキュメントがロードされた後、要素を id 属性でクエリし、その参照を window オブジェクトに追加します:

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

var list = document.querySelectorAll('[id]');
for(var i = 0) ; i < list.length ; i )
if(list[i].id)
window[list[i].id] = リスト[i]; >

もちろん、このハックが必要なのは FF だけなので、最初にその特性があるかどうかを確認します。最後に、コードを合理化し、配列トラバーサル コールバックを使用して単純な行に圧縮します。

コードをコピーします コードは次のとおりです。 <script> </div>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k){this [k.id] =k}); <div class="codebody" id="code39263"></script>


ただし、ドキュメントの読み込みが完了する前に、querySelectorAll は現在の要素より前の要素しかクエリできないことに注意してください。 <スクリプト>したがって、上記のコードはドキュメントの最後に配置する必要があります。 ID を使用したアクセスは、ドキュメントがロードされた後にも実行する必要があります。そうしないと、要素が見つからない可能性があります。以下はすべてのブラウザに渡されるテスト ページです:

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

<script> <br>{ <br>mytag.innerHTML = " , document.getElementById!"; <br>} <br></script>
<script> <br>if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[ id]' ),function(e){self[e.id]=e}); <br></script>
>