web-dev-qa-db-ja.com

getElementByIdとjqueryの違い$（ '＃smth'）

従来のJavascriptコードの違いは何ですか？

document.getElementById('theID')

およびjQueryバージョン：

$('#theID')
javascriptjquerygetelementbyid
27
Andrew Ckor

_document.getElementById_はDOMオブジェクトを返します。これは、ページ内の要素についてのブラウザのネイティブな考え方です。さまざまなメソッドとプロパティがあります。これらは使用するのが少し不格好かもしれません。

JQueryオブジェクト（_$_メソッドによって作成された）は、DOM要素またはDOM要素のセットのラッパーです。通常のプロパティとメソッドは使用できません。 DOM操作のプロセスをより直感的にするさまざまな方法を選択できます。

選択範囲に複数の要素があると、違いがより明確になります（たとえば、クラスセレクター$('.someClass')の場合と同様ですが、jQuery選択範囲のメソッドはネイティブDOM要素のメソッドとは異なります。彼らは同じことを指していますが、それについての考え方や扱い方は異なります。

最後に、 get メソッド（edit：または代替の配列のような構文）を使用して、jQueryの選択をネイティブのDOM要素に変換できます。そう

_document.getElementById('theID')
_

とまったく同じです

_$('#theID').get(0) // or $('#theId')[0]
_

ただし、パフォーマンスがはるかに優れているため、最初のものを使用する必要があることに注意してください。 jQueryが提供する追加機能が必要な場合にのみ、jQueryを使用してください。

55
lonesomeday

必ず含めてください

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

あなたの<head>で

jQueryをロードしない場合、jQueryは外部ライブラリでありJavaScriptの一部ではないため、$を使用できません。

0
Raynos

完全ではありません：そのIDの要素がページに存在しない場合、$（ "＃id"）は機能せず、スクリプトは停止しますdocument.getElementById（ "id"）はnullを返します

0
Paulcraey

2番目のプロジェクトでは、上部にjQueryファイルが含まれていない可能性があります。

0
Neal