JavaScriptでIDを名前で選択する方法は？

Question

は、私が持っていると言う：コード内

test1 

：

<div id='test1'></div> 

は、私は単にそれを参照したいです。代わりに：

document.getElementById('test1'); 
$('#test1') // if in jquery 

そして私は、私は一般的な解決策を探していますwindow.test1 = $('#test1');を行うにはしたくありません。私はおそらく、init上の関数を使ってすべてのidを繰り返し処理することができますが、dom要素がプログラム全体で動的に作成されるとどうなるでしょうか。 dom要素を追加するたびにidsをウィンドウに割り当てる関数を実行したくありません。

test1（およびすべてのIDはページにあります）は常にウィンドウオブジェクトの一部になります。デフォルトではこれを行う方法はありますか？誰かが存在しないウィンドウオブジェクトにアクセスしようとしたときにコードを注入する方法があり、明示的にそれを書かなくても何とかそのコードがdocument.getElementByIdを実行するようになるかもしれません。

Answer 1

最初に、あなたの質問DOMに関連して、Javascriptではありません。第二に、現在の基準としては、それを達成する方法がありません。もちろん、セレクタを変数に代入して再利用することもできます。

Answer 2

プロパティアクセスをdomルックアップに変換するProxyを作成できます。

const dom = new Proxy(window, { 
    get(_, name) { 
     return document.getElementById(name); 
    } 
}); 

dom.test1.style.position = "static"; // tada 

注：実際にこの

Answer 3

だから技術的にあなたのIDは実際にすでに（少なくとも、Chromeの）グローバル変数として公開されていないません。コンソールを開き、IDの1つを入力してみてください。しかし、これに頼って非常に悪い考えです。

windowという要素があるシナリオを考えてみましょう。さて、それはグローバルwindowオブジェクトと競合するので、グローバルとして公開されることはありません。

DOMにアクセスするときに明白な理由があります。また、これをより便利にしようとすることによって導入する認知的負担が、間違いなくあなたを後で悩ませることになります。

Answer 4

あなたはjQueryのように窓の変数を設定することができます - 毎回動的な要素が作成されたウィンドウの変数を追加するための一般的な機能を作成し

function (elem) { 
    window['id_' + elem.attr('id')] = elem; 
} 

elem($("#test1")); 

。しかし、あなたは何とか動的変数が作成される関数を呼び出す必要があります。