2010-12-01 8 views
6

この質問は愚かに見えるかもしれませんが、document.getElementById( "someId")を使用して要素(id "someId")にアクセスすることとの違いは何ですか? someIdをタイプするだけですか?document.getElementById( "someId")対。 someId

例:ここでは

someId.style.top = "12px"; 

document.getElementById("someId").style.top = "12px"; 

は、クライアント側のスクリプトのサンプルコードhttp://jsfiddle.net/pRaTA/(私はそれがFirefoxで動作しないことが判明)

+2

2番目のフォームの問題は名前の衝突です。たとえば、jsfiddleでは "abc"を "document"に変更し、それぞれの場合に何が起こるかを確認します。 – Alohci

+0

可能な重複を見てください[DOMツリー要素のグローバル変数はここにありますか?](0120-385-304) – Bergi

答えて

5

diffe一部のブラウザではsomeIdが動作しますが、実際にはdocument.getElementById("someId")はW3C標準に準拠しています。

+0

はい、私は同意します。私はfirefoxでこれをテストし、うまくいきませんでした。 Chrome/IEでうまく動作します。 http://jsfiddle.net/pRaTA/ – kwa

0

だ、我々は文書を行います.getElementById:Webページの要素objを取得します。特定の要素をDOMとそのプロパティの&メソッドから取得するには、getElementByIdメソッドを使用する必要があります。 Jqueryでは、単純にvar objX = $( '#id')を実行することができます。

ここで、IDを直接書き留めることはできません。どのように文書をトラバースせずにDOMから要素objを抽出するのでしょうか? document.getElementByIdメソッドは、要素情報をドキュメントから取得します。これが意味をなさないことを願っています。

+0

2番目のメソッドが実際に動作するので、これを尋ねました。 – kwa

2

要素DOM IDを宣言しても、すべてのブラウザでグローバル変数として使用できるわけではありません。それを得るための唯一の互換性のある方法は、まず行うことです。

var someId = document.getElementById("someId"); 

編集:私はWebKitのベースのブラウザはそれを最初に宣言せずにVARとしてidが利用できるようにするように見えることを確認し、このテストコードを作りました。 thisによれば、IEもこの動作を示します。

  • Firefoxの:未定義のオブジェクト/
  • サファリ:オブジェクト/オブジェクト
  • クローム:オブジェクト/オブジェクト
  • IE:オブジェクト/オブジェクト(未確認)

コード:

<html 
    <head> 
    </head> 
<body> 
    <div id="foo"></div> 
    <script type="text/javascript"> 

    alert("getElementById: "+typeof document.getElementById("foo")); 
    alert("as a var: "+typeof foo); 

    </script> 
</body> 
+0

はい、Firefoxでは動作しません。 btw、それもIEで動作します! http://jsfiddle.net/pRaTA/ – kwa

+2

エキサイティングです。私はWebkitブラウザがそれをしたことを知らなかった。重複の可能性がありますhttp://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here –

+0

このリンクをお寄せいただきありがとうございます!面白い、私は本当に私はこの質問をするために笑われると思った! :) – kwa

0

ちょうどsomeIdを使用することは、要素を選択する古い方法です(これはIEで実装されたと思います)。 document.getElementByIdは、すべてのブラウザで動作する標準のものです。

古いIEブラウザのみをサポートするというシナリオを考えてみましょう。 document.getElementByIdはさらに信頼性が高く読みやすいです。 idsのすべての数値を使用している場合は信頼できます。例えば

:要素(2番目の例)のIDにちなんで名付けられたグローバルオブジェクトの性質などの要素にアクセス

input element id="123" 

document.getElementById('123').value; // this one works 
123.value; // this one doesn't 
+0

また、これはFirefoxでは動作しません! – kwa

+0

第2段落の第1文「古いIEブラウザのみをサポートするシナリオを検討する」を読んでください。 – sheeks06

0

はIEで発信され、Safariとクロームによってコピーされた利便性です。それは本当に悪い考えです。あなたはそれを使用すべきではありません。主な問題は、名前付けの衝突です(たとえば、「アラート」や「ドキュメント」などの完全に有効なIDを持つ要素など)。一方、some idiotic IE flawsを除いて、完全に確立されたDOM標準であり、完全に保護されています。常に他のフォームより優先して使用してください。

+0

説明をありがとう! :) – kwa

関連する問題