4

私は次のようなHTML要素にアクセスするためのJavaScriptコードを見てきました：elementID.innerHTML、そしてそれは機能しますが、私が検索したほとんどすべてのチュートリアルはを使用しますdocument.getElementById()。短いアドレス指定の用語があるかどうかさえわかりません。

最初は、単純化して、ID化された各HTML要素が真下にあると思いましwindowたが、showsを使用getParent()するとツリー構造が存在するため、必要な要素がネストされていても問題ありませんでした。私は短いテストケースを書きました：

http://jsfiddle.net/hYzLu/

<div id="fruit">Mango<div id="color">red</div></div>
<div id="car">Chevy</div>
<div id="result" style="color: #A33"></div>

result.innerHTML = "I like my " + color.innerHTML + " " + car.innerHTML;

「短い」方法は良いショートカットのように見えますが、チュートリアルに実際には表示されないため、何か問題があるように感じます。

なぜdocument.getElementById()好まれるのか、場合によっては必要になることもありますか？

4

3 に答える 3

1

安全だと思います。result実行しているのと同じコンテキストで名前が付けられた変数がある場合result.HTML、ブラウザーはウォブラーをスローすると確信しています。この場合の方法でそれを行うと、document.getElementById()明らかに関連するDOM要素が提供されます。

また、ページにHTMLを動的に追加している場合、私は間違っている可能性がありますが、何であるかという点で予期しない動作が発生する可能性もありますresult:)

于 2012-05-17T17:19:00.570 に答える
1

要素にもっと「直接」アクセスすべきではないのはなぜですか（elemId.innerHTML）

なぜなら、このスレッドの他の人によると、id名による任意の参照は完全にはサポートされていないからです。

したがって、代わりに実行する必要があると思うのは、選択内容を変数に格納してから、変数を参照することです。

代わりに試してください

var color = document.getElementById('color');
color.innerHTML = 'something';

これを行うのが良い理由は、DOMでルックアップを実行することは、メモリの面でコストのかかるプロセスであるためです。したがって、要素の参照を変数に格納すると、静的になります。したがって、ルックアップを実行するたびにルックアップを実行するわけではありません.doSomething()。

javascriptライブラリは、ブラウザ間での一般的な関数のサポートを強化するためにshim関数を追加する傾向があることに注意してください。これは、たとえば、純粋なjavascriptよりもjqueryのセレクターを使用することの利点になります。ただし、実際にメモリ/パフォーマンスが心配な場合は、通常、ネイティブJSが速度テストに勝ちます。（jsperf.comは、速度を測定して比較を行うための優れたツールです。）

于 2012-05-17T17:23:14.677 に答える
1

また、すべてのIDが変数名として機能しない値を持つことができるわけではないことも付け加えておきます。たとえば、IDが「nav-menu」の場合。

window["nav-menu"]。innerHTMLを書くことができると思いますが

IDと同じ名前のウィンドウレベル変数を作成するとどうなるでしょうか。このjsfiddleをチェックアウトしてください（chromeでテスト済み）：http：//jsfiddle.net/8yH5y/

これは本当に悪い考えのように思えます。参照を複数回使用する場合は、document.getElementById（ "id"）を使用して、結果を変数に格納するだけです。

于 2012-05-17T17:39:12.260 に答える