web-dev-qa-db-ja.com

document.getElementByIdとjQuery $（）の比較

これは：

var contents = document.getElementById('contents');

これと同じ：

var contents = $('#contents');

JQueryがロードされたとしたら？

javascriptjqueryjquery-selectors
551
Phillip Senn

ではない正確に！！

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

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

JQueryでは、document.getElementByIdと同じ結果を得るために、jQueryオブジェクトにアクセスしてオブジェクトの最初の要素を取得することができます（JavaScriptオブジェクトは連想配列と同様に機能することを忘れないでください）。

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

いいえ.

document.getElementById('id')を呼び出すと、生のDOMオブジェクトが返されます。

$('#id')を呼び出すと、DOMオブジェクトをラップし、jQueryメソッドを提供するjQueryオブジェクトが返されます。

したがって、css()呼び出しでは、animate()や$()のようなjQueryメソッドしか呼び出すことができません。

$(document.getElementById('id'))を書くこともできます。これはjQueryオブジェクトを返し、$('#id')と同等です。

$('#id')[0]を書くことでjQueryオブジェクトから基礎となるDOMオブジェクトを取得できます。

124
SLaks

閉じるが、同じではありません。それらは同じ要素を取得していますが、jQueryのバージョンはjQueryオブジェクトにラップされています。

同等のものはこれだろう

var contents = $('#contents').get(0);

またはこれ

var contents = $('#contents')[0];

これらはjQueryオブジェクトから要素を引き出します。

27
RightSaidFred

速度の違いについて次のスニペットをonclick呼び出しに添付してください。

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

一方をコメントアウトしてからもう一方をコメントアウトする。私のテストでは、

document.getElementbyIdの平均値は 35ms （25msの52msから15 runsまでの変動）

その一方で、

jQueryは平均で約 200ms （181msから222msまでの範囲で15 runsの範囲）平均しています。

この単純なテストから、jQueryが約 6倍 の時間がかかったことがわかります。

もちろん、それは10000の繰り返しです。より単純な状況では、使いやすさのためにjQueryを使用し、.animateや.fadeToのような他のクールなものすべてを使用することにします。しかし、そうです、技術的にはgetElementByIdはかなり少し速いです - 速いです 。

22
nurdyguy

最初のものはDOM要素、またはnullを返しますが、2番目のものは常にjQueryオブジェクトを返します。 IDがcontentsの要素が一致しなかった場合、jQueryオブジェクトは空になります。

document.getElementById('contents')によって返されたDOM要素はあなたが.innerHTML（または.value）などを変更することのようなことをすることを可能にします、しかしあなたはjQueryオブジェクトの上で jQueryメソッド を使う必要があるでしょう。

var contents = $('#contents').get(0);

より同義ですが、contentsというIDを持つ要素が一致しない場合、document.getElementById('contents')はnullを返しますが、$('#contents').get(0)は未定義を返します。

JQueryオブジェクトを使用する利点の1つは、オブジェクトが常に返されるため、要素が返されなかった場合でもエラーが発生しないことです。ただし、document.getElementByIdによって返されるnullに対して操作を実行しようとすると、エラーが発生します。

16
Matt

いいえ、実際には同じ結果になります。

$('#contents')[0]

jQueryは、クエリから返される結果の数を知りません。返されるのは、クエリに一致したすべてのコントロールのコレクションである特別なjQueryオブジェクトです。

JQueryを非常に便利なものにしているのは、このオブジェクトに対して呼び出されるMOSTメソッドが、1つのコントロールを対象としているように見え、実際にはコレクション内のすべてのメンバーに対して呼び出されるループ内にあることです

[0]構文を使うとき、内側のコレクションから最初の要素を取ります。この時点でDOMオブジェクトが得られます

14
Andrey

他の誰かがこれを打った場合には...ここにもう一つの違いがあります：

IDにHTML標準でサポートされていない文字が含まれている場合（SO question here を参照）、getElementByIdで検出されなくてもjQueryはそれを見つけられない可能性があります。

Chromeを使用して、 "/"文字を含むID（例：id = "a/b/c"）を入力すると、これが起こりました。

var contents = document.getElementById('a/b/c');

私の要素を見つけることができましたが：

var contents = $('#a/b/c');

しませんでした。

ところで、簡単な解決策は、そのidをnameフィールドに移動することでした。 JQueryは、以下を使用して要素を見つけるのに問題がありませんでした。

var contents = $('.myclass[name='a/b/c']);
8
user1435666

ほとんどの人が言っているように、主な違いは、それがjQuery呼び出しと生のDOMオブジェクトを使ってjQueryオブジェクトにラップされているということです。 jQueryオブジェクトはもちろん他のjQuery機能を実行することができますが、基本的なスタイルや基本的なイベント処理のような単純なDOM操作を実行する必要がある場合は、単純なJavaScriptメソッドは常にjQueryよりも少し速いです。 JavaScriptで構築されたコードの外部ライブラリを読み込む必要があります。それは余分なステップを節約します。

5
Kobby

var contents = document.getElementById('contents');

var contents = $('#contents');

コードスニペットは同じではありません。最初のものはElementオブジェクト（ source ）を返します。 2番目のjQueryと同等のものは、0個または1個のDOM要素のコレクションを含むjQueryオブジェクトを返します。 （ jQueryのドキュメント ）。内部jQueryは効率のためにdocument.getElementById()を使います。

どちらの場合も、複数の要素が見つかった場合は最初の要素だけが返されます。

JQueryのためにgithubプロジェクトをチェックするとき、私はdocument.getElementByIdコードを使っているように思われる以下のラインスニペットを見つけました（ https://github.com/jquery/jquery/blob/master/src/core/init.js 行68以降）

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );
5
Nipuna

もう1つの違いは、getElementByIdは first matchを返し、$('#...')は一致のコレクションを返す - はい、同じIDをHTMLドキュメント内で繰り返すことができます。

さらに、getElementIdはドキュメントから呼び出され、$('#...')はセレクタから呼び出すことができます。したがって、以下のコードでは、document.getElementById('content')は本体全体を返しますが、$('form #content')[0]はフォームの内部を返します。

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

重複したIDを使用するのは奇妙に思えるかもしれませんが、Wordpressのようなものを使用している場合、テンプレートまたはプラグインはコンテンツで使用しているのと同じIDを使用する可能性があります。 jQueryの選択性はそこにあなたを助けることができます。

4
steve banks

jQueryはJavaScriptの上に構築されています。これはとにかくただのJavaScriptです。

document.getElementById（）

Document.getElementById（）メソッドは、指定された値を持つID属性を持つ要素を返します。指定されたIDを持つ要素が存在しない場合はnullを返します。IDはページ内で一意である必要があります。

Jquery $（）

引数としてidセレクタを指定してjQuery（）または$（）を呼び出すと、0個または1個のDOM要素のコレクションを含むjQueryオブジェクトが返されます。各id値は、ドキュメント内で1回だけ使用する必要があります。同じIDが複数の要素に割り当てられている場合、そのIDを使用するクエリはDOM内で最初に一致した要素のみを選択します。

2
Hadi Mir

私は、ページ上のすべてのDOM要素への参照が短いインデックスに格納されるWebブラウザにDOMツリーを格納するためのnoSQLデータベースを開発しました。したがって、関数 "getElementById（）"は要素を取得/変更するために必要ではありません。 DOMツリーの要素がページ上でインスタンス化されると、データベースは各要素に代理主キーを割り当てます。それは無料のツールです http://js2dx.com

1
Gonki

上記のすべての答えは正しいです。実際の動作を確認したい場合は、ブラウザにコンソールを表示するのを忘れないでください。実際の結果がよくわかります。

私はHTMLを持っています：

<div id="contents"></div>

コンソール(cntrl+shift+c)に行き、これらのコマンドを使って結果をはっきりと見てください。

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

ご覧のとおり、最初のケースではタグ自体（つまり厳密にはHTMLDivElementオブジェクト）を取得しました。後者の場合、実際には、単純なオブジェクトはありませんが、オブジェクトの配列はありません。上記の他の回答で述べたように、次のコマンドを使用できます。

$('#contents')[0]
>>> div#contents
1
Mazhar MIK