JQueryをIDで選択document.GetElementByID

Question

私はちょうどJQueryを使い始めており、チュートリアルビデオを使って作業しています。ある時点で、プレゼンターはJQueryセレクターではなくJavascriptを使用します。ちょうど、関数にオブジェクトを渡すときにjavascriptのgetElementByIdがうまく動作する理由は疑問ですが、2番目のものはありませんか？

ありがとうございます！

// works 
addTask(document.getElementById('taskText'), evt); 

// doesn't 
addTask($('#taskText'), evt); 

Answer 1

getElementById()はDOM要素参照を返します。

jQueryのセレクタがjQueryオブジェクトを返します。あなたは

$('#taskText').get(0); 

を使用してjQueryオブジェクトから要素の参照を取得することができますhttp://api.jquery.com/get/

Answer 2

$('#taskText')はjQueryオブジェクトの参照を返します参照してください。

document.getElementById('taskText')は、DOM要素参照を返します。

addTask()関数では、関数を必要なものに変換する方法がわからない場合は、そのうちの1つが変換を必要とするため、問題になります。

あなたはjQueryオブジェクトから最初のDOM要素の参照を取得したい場合は、あなたがこれを行うことができます。

$('#taskText').get(0) 

したがって、これらの二つは同じでなければなりません：

$('#taskText').get(0) 
document.getElementById('taskText') 

Answer 3

に追加するにはあなたがjQuery（読みやすい）を使用したい場合は、他の答え、結果に関しては、次のようにDOMノードを直接得ることができます：

addTask($('#taskText')[0], evt); 

Answer 4

は両ので、あなたがHTML DOMオブジェクトに@Philとして

addTask($('#taskText')[0], evt); 

Answer 5

を取得し、jfriend00 @に変更する必要が

document.getElementById('taskText'); //returns a HTML DOM Object 

var contents = $('#taskText'); //returns a jQuery Object 

var contents = $('#taskText')[0]; //returns a HTML DOM Object 

まったく同じ指摘している、のdocument.getElementById（ 'taskText'）がされていませんDOM要素、$（ '＃taskText'）はjQueryオブジェクトです。後者は、セレクタと一致するすべてのDOM要素のオブジェクトです。

addTask($('#taskText')[0], evt);