document.getElementById ve jQuery $ ()

Bu:

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

Bununla aynı:

var contents = $('#contents');

JQuery yüklendi mi?

Tam olarak değil!!

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

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

JQuery'de, aynı sonucu almak için document.getElementByIdjQuery Nesnesine erişebilir ve nesnedeki ilk öğeyi alabilirsiniz (JavaScript nesnelerinin ilişkilendirilebilir dizilere benzer şekilde hareket ettiğini unutmayın).

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

Hayır.

Arama document.getElementById('id'), ham bir DOM nesnesi döndürür.

Çağrı $('#id'), DOM nesnesini saran ve jQuery yöntemleri sağlayan bir jQuery nesnesi döndürür.

Böylece, yalnızca gibi jQuery yöntemleri çağırabilir css()veya animate()üzerinde $()görüşme.

Ayrıca $(document.getElementById('id')), bir jQuery nesnesi döndürecek ve eşdeğer olan yazabilirsiniz $('#id').

Temeldeki DOM nesnesini bir jQuery nesnesinden yazarak alabilirsiniz $('#id')[0].

Kapat, ama aynı değil. Aynı öğeyi alıyorlar, ancak jQuery sürümü bir jQuery nesnesine sarılmış.

Eşdeğer bu olurdu

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

veya bu

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

Bunlar, öğeyi jQuery nesnesinden çeker.

Hız farkı üzerine bir not. Aşağıdaki snipeti bir onclick çağrısına ekleyin:

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

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


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

Birini yorumlayın ve sonra diğerini yorumlayın. Testlerimde,

Document.GetElementById hakkında ortalama 35ms (inip 25msup 52msyaklaşık üzerinde 15 runs)

Öte yandan,

jQuery yaklaşık 200 ms'dir ( yaklaşık 181msila 222msyaklaşık 15 runs).

Bu basit testten jQuery'nin yaklaşık 6 kat daha uzun sürdüğünü görebilirsiniz.

Tabii ki bitti 10000yinelemeleri böylece daha basit bir durumda muhtemelen kullanım kolaylığı ve benzeri diğer tüm çıkan şeyler için jQuery kullanmak .animateve .fadeTo. Ama evet, teknik getElementByIdolarak biraz daha hızlı .

Hayır. Birincisi bir DOM öğesi veya null değerini döndürürken, ikincisi her zaman bir jQuery nesnesi döndürür. JQuery nesnesi, kimliğine sahip bir öğe yoksa boş olacaktırcontents .

Tarafından döndürülen DOM öğesi (veya ) vb. document.getElementById('contents')Gibi şeyler yapmanıza izin verir , ancak jQuery Nesnesinde jQuery yöntemlerini kullanmanız gerekir ..innerHTML.value

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

Kimlikli hiçbir unsur, ancak eğer daha equivilent mi contentseşleştirilir, document.getElementById('contents')return null, ancak$('#contents').get(0) tanımsız döndürecektir.

JQuery nesnesini kullanmanın bir yararı, bir nesne her zaman döndürüldüğünden, hiçbir öğe döndürülmediğinde herhangi bir hata elde etmemenizdir. Ancak, nulltarafından iade edilen işlemleri gerçekleştirmeye çalışırsanız hata alırsınız .document.getElementById

Hayır, aslında aynı sonuç:

$('#contents')[0] 

jQuery sorgudan kaç sonuç döndürüleceğini bilmiyor. Geri almak ne sorgu ile eşleşen tüm denetimlerin bir koleksiyon olan özel bir jQuery nesnesidir.

JQuery'yi bu kadar kullanışlı yapan şeylerden biri, bu nesne üzerinde bir kontrol için tasarlanmış gibi görünen MOST yöntemlerinin aslında koleksiyondaki tüm üyelerde çağrılan bir döngüde olmasıdır.

[0] sözdizimini kullandığınızda, iç öğeden ilk öğeyi alırsınız. Bu noktada bir DOM nesnesi elde edersiniz

Başka birinin buna çarpması durumunda ... İşte başka bir fark:

Kimlik, HTML standardı tarafından desteklenmeyen karakterler içeriyorsa ( buradaki SO sorusuna bakın) ), getElementById yapsa bile jQuery bulamayabilir.

Bu, Chrome kullanarak "/" karakterleri içeren bir kimlikle (ör: id = "a / b / c") gerçekleşti:

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

öğemi bulabildim ama:

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

olmadı.

Btw, basit düzeltme bu kimliği ad alanına taşımaktı. JQuery kullanarak öğeyi bulmakta sorun yaşamadım:

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

Çoğu insanın söylediği gibi, asıl fark, jQuery nesnesine düz JavaScript kullanarak ham DOM nesnesine karşı jQuery nesnesine sarılmış olmasıdır. JQuery nesnesi elbette onunla diğer jQuery işlevlerini yapabilecektir, ancak temel stil veya temel olay işleme gibi basit DOM manipülasyonu yapmanız gerekiyorsa, düz JavaScript yöntemi her zaman jQuery'den biraz daha hızlıdır. JavaScript üzerine kurulu harici bir kod kütüphanesine yüklemek zorunda değilsiniz. Fazladan bir adım kazandırır.

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

var contents = $('#contents');

Kod parçacıkları aynı değildir. ilk olarak bir Elementnesne ( kaynak ) döndürür . İkincisi, jQuery eşdeğeri, sıfır veya bir DOM öğesinden oluşan bir koleksiyon içeren bir jQuery nesnesi döndürür. ( jQuery belgeleri ). Dahili olarak jQuery document.getElementById()verimlilik için kullanır .

Her iki durumda da birden fazla eleman bulunması durumunda sadece ilk eleman döndürülecektir.

Github projesini jQuery için kontrol ederken document.getElementById kodlarını kullanıyor gibi görünen aşağıdaki satır snippet'lerini buldum ( https://github.com/jquery/jquery/blob/master/src/core/init.js satır 68 sonrası)

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

Bir diğer fark: getElementByIddöndüren ilk ederken, maçı $('#...')- evet, aynı kimlik bir HTML doc tekrar edilebilir döner eşleşmelerin koleksiyonu.

Ayrıca, getElementIdbelgeden $('#...')çağrılırken, bir seçiciden çağrılabilir. Yani, aşağıdaki kodda document.getElementById('content'), tüm vücudu döndürecek, ancak $('form #content')[0]formun içine geri dönecektir.

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

Yinelenen kimlikler kullanmak garip gelebilir, ancak Wordpress gibi bir şey kullanıyorsanız, bir şablon veya eklenti içerikte kullandığınızla aynı kimliği kullanabilir. JQuery'nin seçiciliği size yardımcı olabilir.

jQuery JavaScript üzerine kurulmuştur. Bu zaten sadece javascript olduğu anlamına gelir.

Document.GetElementById ()

Document.getElementById () yöntemi, belirtilen değere sahip ID özniteliğine sahip öğeyi döndürür ve belirtilen kimliğe sahip hiçbir öğe yoksa null değerini döndürür.

Jquery $ ()

Bağımsız değişken olarak id seçici ile jQuery () veya $ () çağrıldığında, sıfır veya bir DOM öğesi koleksiyonu içeren bir jQuery nesnesi döndürülür.Her kimlik değeri, belge içinde yalnızca bir kez kullanılmalıdır. Birden fazla öğeye aynı kimlik atanmışsa, bu kimliği kullanan sorgular DOM'da yalnızca eşleşen ilk öğeyi seçer.

Sayfadaki tüm DOM öğelerine yapılan başvuruların kısa bir dizinde saklandığı Web Tarayıcılarında DOM ağaçlarını saklamak için bir noSQL veritabanı geliştirdim. Bu nedenle "getElementById ()" fonksiyonunun bir elemanı alması / değiştirmesi gerekmez. DOM ağacındaki öğeler sayfada başlatıldığında, veritabanı her öğeye yedek birincil anahtarlar atar. Ücretsiz bir araçtır http://js2dx.com

Yukarıdaki tüm cevaplar doğrudur. Hareket halindeyken görmek istiyorsanız, gerçek sonucu kristal netliğinde görebileceğiniz bir tarayıcıda Konsolunuz olduğunu unutmayın:

Bir HTML kodum var:

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

Konsola gidin (cntrl+shift+c)ve sonucunuzu net bir şekilde görmek için bu komutları kullanın

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

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

Gördüğümüz gibi, ilk durumda etiketin kendisini aldık (yani, bir HTMLDivElement nesnesi). İkincisinde aslında düz bir nesne değil, bir dizi nesne var. Ve yukarıdaki diğer cevaplarda belirtildiği gibi, aşağıdaki komutu kullanabilirsiniz:

$('#contents')[0]
>>> div#contents

2019'dan itibaren tüm cevaplar eskidir, javascript'teki id anahtarlı dosyalara doğrudan erişebilirsiniz.

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

Çevrimiçi Demo! - https://codepen.io/frank-dspeed/pen/mdywbre