2009-08-19 6 views
1

私は経験豊富な開発者ですが、javascriptを初めて使用しています。私は "document.getElementById(e.id).value"全体をいつ使うべきか、私はちょうど "e"を使うことができるのか分かりません。私は両方を使用する共通の関数スクリプトで、小さな既存の関数を見ています。getElementByIdはいつ使用しますか?

関数RemoveFormat(E){
のdocument.getElementById(e.id).VALUE = cleanNumber(のdocument.getElementById(e.id).VALUE)。 e.select(); }

(cleanNumberは別の一般的な関数である)

はおそらく余分なタイピングが必要で作るの事情がありますが、彼らは何ですか?

ありがとうございます!

答えて

2

この例では、制御したい要素への参照がある場合を示しています。すでに要素への参照を持っている場合は、それへの参照を取得するためにdocument.getElementByIdを使用する理由は、(あなたが既に持っている)が存在しない:

<span id="mySpan" onclick="test(this);">TEST</span> 
<script type="text/javascript"> 
function test(el) { 
    // el is a reference to an element, you can use it directly 
    el.style.display = 'none'; 

    // to demonstrate that the element you retrieve from gEBI 
    // with el.id is the same as your original reference 
    var elAgain = document.getElementById(el.id); 
    alert(elAgain === el); // "true" 
} 
</script> 

したいときにdocument.getElementByIdを使用する場合があります場所です(これまでであれば)ほとんどありませんことを、次のような何か理由

<span id="mySpan" onclick="test(this, 'myDiv');">TEST</span> 
<div id="myDiv" style="display:none;">DIV REVEALED</div> 
<script type="text/javascript"> 
function test(el, otherElId) { 
    // el is a reference to an element, you can use it directly 
    el.style.display = 'none'; 
    // otherElId is a string containing the id of 
    // the element you want to control 
    var theDiv = document.getElementById(otherElId); 
    theDiv.style.display = ''; 
} 
</script> 

注:

<span id="mySpan" onclick="test('mySpan');">TEST</span> 
<script type="text/javascript"> 
function test(theElId) { 
    var el = document.getElementById(theElId); 
    el.style.display = 'none'; 
} 
</script> 
をすでに参照を持っていないためにどの他の要素を制御します

関数が要素イベントから起動されている場合は、イベントが発生している要素のIDを渡すのではなく、this(最初の例のとおり)を渡すことができます。

+0

お返事いただきありがとうございます。今後のことを教えていただきありがとうございます。 – CindyH

5

eがノードの場合は、document.getElementById(e.id)と書く必要はありません。

+0

ありがとうございました。 – CindyH

1

これを行う理由はありません。それあなたはあなたがどうなるDOMから要素を取得するが、あなたの関数に要素を渡すのルックスによって

e.value = cleanNumber(e.value); 
+0

ありがとうございます。 – CindyH

0

var e = document.getElementById('elementId') 
+0

ご清聴ありがとうございます! – CindyH

2

のdocument.getElementById()だけでDOMオブジェクトを探します与えられたID(文字列)を返し、見つかったらそれを返します。

しかし、eは、DOMオブジェクトである可能性のある任意の変数、または文字列のようなものかもしれません。残りのソースコードの文脈によって異なります。あなたのコードは次のように見える場合

getElementByIdを()が必要です:

<input id="mytext" type="text" onchange="RemoveFormat('mytext')" /> 

getElementByIdを()あなたのコードは次のように見える場合不要です:

<input id="mytext" type="text" onchange="RemoveFormat(this)" /> 

"この"部分はDOMオブジェクト(この場合はテキストボックス)への参照を渡します。これはあなたが実際に行っているものです。したがって、document.getElementByIdは不要です。同じ例をボタンのクリック、リンクのオンマウスオーバーなどに適用することができます。

一般的に私はあなたのJavaScriptをきれいにするので、可能であれば "this"メソッドを使用することをお勧めします。しかし時にはそれは適切ではない。だから私は私がどのメソッドを使用したかを覚えてくれるjavascriptの命名規則を使用します。同様に、DOMオブジェクトには変数e、文字列にはidを使用します。これはあなたのコードをそのままにするのに役立ちます。

+0

詳細な回答ありがとうございました。 – CindyH

0

は、正確に言えば、機能

function f (e) { 
    return document.getElementById(e.id); 
} 

が電子文書であることを仮定し、恒等関数どこでもそれが定義されています。

+0

ありがとう - 私は明確化を感謝します。 – CindyH

0

window.nodeIdは非標準のIE拡張で、最新のバージョンのfirefoxにのみ存在し、これを利用するたびに警告が記録されます。しかし、他の問題は、誰かがノード識別子と競合する名前を持つ変数または関数を定義した場合、その変数または関数がノード参照をオーバーライドするということです。

これらの詳細は、document.getElementByIdが常に正しく動作するのに対して、window.nodeIdを使用すると完全に正しく動作することを保証できないことを意味します。

関連する問題