document.getElementByIdとjQuery $（）

620

これは：

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

これと同じ：

var contents = $('#contents');

jQueryが読み込まれているとしたら？

javascript jquery jquery-selectors

— フィリップセン
ソース

10

回答で指摘されたポイントに加えて、jQueryバージョンはappです。100倍遅い。

8

これはどこかで証明されていますか？

— FranBran

12

@torazaburo実際、jQueryのバージョンは3倍も遅くありません（少なくとも最新のChromeでは）。参照：jsperf.com/getelementbyid-vs-jquery-id/44

— のMichałPerłakowski

2

そのリンクの@MichałPerłakowskiはjqueryバージョンが10倍遅くなります。26mil vs 2.4mil

— Claudiu Creanga

1

JSPerfの正しい更新済みリンクは次のとおりです。jsperf.com/ getelementbyid-vs-jquery-id私の場合（FF 58）、1000倍遅くなります。とにかく、jQueryは依然として毎秒250万演算を実行します。一般にそれは問題ではなく、機能の点で比較することはできません。

— Diego Jancic 2018年

1017

ではない正確に！！

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

— John Hartsock
ソース

24

興味のある人document.getElementByは<IE8では正しく動作しません。また、要素を取得するnameため、理論的にはdocument.getElementById誤解を招くだけでなく、誤った値を返す可能性があると主張できます。私は@ジョンがこれを新しいと思うが、私はそれはそれを追加して損はないだろうと思った。

— ライム

14

識別子が固定されていない場合は注意してください。jQueryで特別に扱われる文字が含まれ$('#'+id)[0]てdocument.getElementById(id)いるid可能性があるため、と等しくありません！

— ジェイコブ

1

これは非常に役に立ちました-これを知らなかった！でも、実際に使ったことがあると思いますが、それが私を困らせます。ねえ、あなたは毎日何かを学びます！ありがとう！

— jedd.ahyoung

3

グーグルjquery equivalent of document.getelementbyidと最初の結果はこの投稿です。ありがとうございました！！！

— ajakblackgoat 2013

$('#contents')[0].idID名を返します。

— オマール

139

番号。

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

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

このように、あなただけのようなjQueryのメソッドを呼び出すことができますcss()またはanimate()上の$()呼び出しを。

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

を記述することにより、jQueryオブジェクトから基になるDOMオブジェクトを取得できます$('#id')[0]。

— SLaks
ソース

4

$（document.getElementById（ 'element'））と$（ '＃element'）のどちらが速いか知っていますか？

— IvanIvković2013年

10

@IvanIvković：文字列の解析が含まれないため、最初の方が高速です。

— SLaks 2013年

1

@SLaks生のDOMオブジェクトとjQueryオブジェクトの主な違いは何ですか？jQueryオブジェクトを使用するだけで、jQueryメソッドを適用できますか？

— Roxy'Pro

@ Roxy'Pro：それらは異なるオブジェクトです。jQueryオブジェクトはDOMオブジェクトをラップします。ドキュメントを参照してください。

— SLaks

このドキュメントは、JavaScript DOMオブジェクトとjQueryオブジェクトの比較に役立ちます。

In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.

— user3454439

31

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

同等のものはこれです

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

またはこれ

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

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

— RightSaidFred
ソース

29

速度の違いに関するメモ。次のスニペットを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は約平均35ミリ秒（からの変動25msまでに52msおよそ上15 runs）

一方、

jQueryのは、約平均200msの（からまで181msの222ms程度に15 runs）。

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

もちろん、これは10000反復処理なので、より単純な状況では、jQueryを使用して使いやすさを向上させたり、.animateやのようなその他すべての優れた機能を使用したりします.fadeTo。しかし、はい、技術的にgetElementByIdはかなり高速です。

— ナーディガイ
ソース

この回答をありがとう。私がお聞きしたかった、私はすべて交換する必要がある$('#someID') とdocument.getElementById("someID") ？私は広範囲に使用$('#someID')している何かに取り組んでおり、大きなファイル入力のために私のページの実行が遅くなります。どうすればいいのか教えてください。

— Mazhar MIK

同じスコープで同じものを数回再利用する場合は、保存して、var $myId = $('#myId');保存した変数を再利用します$myId。IDによる検索は一般にかなり高速ですが、ページが遅い場合は、おそらく別の理由があります。

— nurdyguy

ありがとう@nurdyguy。それは役に立ちました。それを実装してみます。

— Mazhar MIK

17

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

が返すDOM要素をdocument.getElementById('contents')使用すると、.innerHTML（または.value）などを変更できますが、jQueryオブジェクトでjQueryメソッドを使用する必要があります。

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

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

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

— マット
ソース

15

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

$('#contents')[0]

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

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

[0]構文を使用する場合、内部コレクションから最初の要素を取得します。この時点で、DOMオブジェクトを取得します

— アンドレイ
ソース

10

他の誰かがこれにぶつかった場合...これは別の違いです：

idにHTML標準でサポートされていない文字が含まれている場合（SOの質問はこちらを参照））、getElementByIdで検索されてもjQueryで検索されない場合があります。

これは、Chromeを使用して、「/」文字を含むID（例：id = "a / b / c"）で発生しました。

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

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

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

しませんでした。

ところで、簡単な修正は、そのIDを名前フィールドに移動することでした。jQueryは、以下を使用して要素を見つけることに問題はありませんでした。

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

— ユーザー1435666
ソース

5

ほとんどの人が言ったように、主な違いは、それがjQuery呼び出しでjQueryオブジェクトにラップされるのに対して、ストレートJavaScriptを使用する未加工のDOMオブジェクトであるということです。もちろん、jQueryオブジェクトは他のjQuery関数を実行できますが、基本的なスタイリングや基本的なイベント処理などの単純なDOM操作を実行する必要があるだけであれば、まっすぐなJavaScriptメソッドはjQueryよりも少し高速です。 JavaScriptで構築されたコードの外部ライブラリをロードする必要があります。それは余分なステップを節約します。

— コビー
ソース

5

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

var contents = $('#contents');

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

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

jQueryのgithubプロジェクトを確認すると、document.getElementByIdコードを使用しているように見える次のラインスニペットが見つかりました（https://github.com/jquery/jquery/blob/master/src/core/init.js 68行目以降）

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

— ニプナ
ソース

4

もう一つの違いは：getElementById返す最初ながら、試合を$('#...')-はい、同じ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の選択性は、あなたを助けるでしょう。

— スティーブバンク
ソース

2

jQueryはJavaScript上に構築されています。これはとにかくそれが単なるJavaScriptであることを意味します。

document.getElementById（）

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

jquery $（）

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

— ハディミール
ソース

1

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

— 権基
ソース

1

上記のすべての答えは正しいです。実際の結果を確認したい場合は、ブラウザにコンソールを表示して、実際の結果を非常に明確に確認できることを忘れないでください。

私は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

— マザールMIK
ソース

1

2019年現在、すべての回答は古く、JavaScriptでIDキー付きフィールドに直接アクセスできます。

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

オンラインデモ！- https://codepen.io/frank-dspeed/pen/mdywbre

— フランク・ドスピード
ソース