2011-08-07 17 views
64

... jQueryのは、それがアラートで[object Object]として表示要素を返しjQueryオブジェクトとDOM要素

getElementByIDが要素を返すと、[object HTMLDivElement]と表示されます。それはどういう意味ですか?私はそれらの両方の違いを持つオブジェクトですか?

また、jQueryオブジェクトとDOM要素を操作できるメソッドはどれですか? 1つのjQueryオブジェクトが複数のDOM要素を表すことはできますか?

+0

http://stackoverflow.com/questions/15479988/raw-dom-element-vs-jquery-object –

答えて

82

Iは、jQueryオブジェクトとjQueryオブジェクトは、DOM要素(複数可)を含むアレイのようなオブジェクトである

DOM要素間の関係を理解し​​たいと思います。 jQueryオブジェクトには、使用するセレクタに応じて複数のDOM要素を含めることができます。

また、jQueryオブジェクトとDOM要素を操作できるメソッドはどれですか? 1つのjQueryオブジェクトが複数のDOM要素を表すことはできますか?

jQuery関数(完全なリストはウェブサイト上にあります)は、jQueryオブジェクト上で動作し、DOM要素では動作しません。あなたは.get()を使用して、または直接希望インデックスにある要素にアクセスするjQueryの関数内のDOM要素にアクセスすることができます。つまり

$("selector")[0] // Accesses the first DOM element in this jQuery object 
$("selector").get(0) // Equivalent to the code above 
$("selector").get() // Retrieve a true array of DOM elements matched by this selector 

、あなたにも同じ結果を得る必要があり、次の

<div id="foo"></div> 

alert($("#foo")[0]); 
alert($("#foo").get(0)); 
alert(document.getElementById("foo")); 

の場合をjQueryオブジェクトの詳細については、see the documentationを参照してください。また、戻り値を持たない.get()

2

これはあなたのブラウザが巧妙であることです。どちらもオブジェクトですが、DOMElementsは特別なオブジェクトです。 jQueryはDOMElementsをJavascriptオブジェクトにラップするだけです。

デバッグ情報をもっと使いたい場合は、Firebug for FirefoxやChromeのビルトインインスペクタ(Firebugとよく似ています)などのデバッグツールをお勧めします。

4

ほとんどjQueryのメンバーFunctionsのドキュメントをチェックアウトするのではなく、現在のjQuery Objectまたは別のjQuery Objectを返します。


したがって、

console.log("(!!) jquery >> " + $("#id")) ; 

Documentに対してセレクタString"#id")を評価した結果であるコレクションを維持jQuery Objectすなわち、[object Object]が返され、

一方、

console.log("(!!) getElementById >> " + document.getElementById("id")) ; 
戻り値が div Elementの場合、210/

[object HTMLDivElement](または実際はIEでは[object Object])を返します。方法はDOM要素対jQueryオブジェクトを操作することができるものも


? (1)単一のjQueryオブジェクトが複数のDOM要素を表すことはできますか? (2)

(1)DOM Object Sに関係のjQueryのメンバーFunction複数のホストがあります。特定のタスク(例えば、Nodeの選択や操作など)がある場合は、関連するFunctionのjQuery APIドキュメントを検索するのが最善の方法です。

(2)はい、単一jQuery Objectは、複数のDOM Elementのリストを維持することができます。この自動キャッシュ動作に基づいて構築されるFunctionsjQuery.findまたはjQuery.eachなど)が複数存在します。

+0

ああ、他のブラウザでのみ、IEはそれに具体的に「[object HTMLDivElement]」と[オブジェクトオブジェクト] – testndtv

+0

私が知る限り、そうです。IEでは '[object Object]'はまだ 'div'要素です。 jQueryで選択すると、 'jQuery Object'になります。 – FK82

10

jQueryを使用してDOM要素を取得すると、jQueryオブジェクトにはその要素への参照が含まれます。 getElementByIdのようなネイティブ関数を使用すると、jQueryオブジェクトに含まれていない要素への参照が直接取得されます。

jQueryオブジェクトは、複数のDOM要素を含むことができる配列のようなオブジェクトである:

var jQueryCollection = $("div"); //Contains all div elements in DOM 

上記ラインはjQueryをすることなく実行することができる:実際に

var normalCollection = document.getElementsByTagName("div"); 

、それはまさにjQueryのdivのような簡単なセレクタを渡すと内部で行います。あなたはgetメソッドを使用してjQueryのコレクション内の実際の要素にアクセスすることができます。

var div1 = jQueryCollection.get(0); //Gets the first element in the collection 

、要素、または要素のセットを持っている場合は、jQueryオブジェクトの内側に、あなたはjQueryのAPIで利用可能な方法のうちのいずれかを使用することができます一方、生の要素がある場合はネイティブJavaScriptメソッドしか使用できません。

6

先月、jQueryを使い始めたばかりで、似たような質問が私の周りを走っていました。

あなたが関数内にいて、呼び出し元を参照するとしたら、のいずれかを使用することができます。これは、または$(this);違いは何ですか?あなたが$(this)を使用するときは、thisをjQueryオブジェクトの中にラップしています。利点は、オブジェクトがjQueryオブジェクトであると、そのオブジェクト上のすべてのjQuery関数を使用できることです。

var s = '<div>hello <a href='#'>world</a></div><span>!</span>'という要素の文字列表現を、$():$(s)に文字通りラップするだけでjQueryオブジェクトの中にラップすることもできるので、かなり強力です。これでjQueryでこれらの要素をすべて操作できます。

関連する問題