Javascript querySelector ve getElementById [kapalı]

122

Bunu duymuş querySelector& querySelectorAllseçmek için yeni yöntemler DOMunsurlar. Nasıl eski yöntemlere karşılaştırmak, do getElementById& getElementsByClassNameperformans ve tarayıcı desteği açısından?

Performans, jQuery'nin sorgu seçicisinin kullanımına kıyasla nasıldır?

Hangi yerel kümenin kullanılacağı için bir en iyi uygulama önerisi var mı?

javascript jquery dom

— goToEleven
kaynak

Daha iyi tanımlayın. Neredeyse tamamen farklılar.

Bu, "tek boyutlu bir İngiliz anahtarı, ayarlanabilir bir İngiliz anahtarından daha mı iyidir?" Cevap: onlar daha güçlü ve daha esnek ve çok üstün pek çok kez, ama getElementByIdve getElementsByClassNameyine isimleri açıklamak amacıyla idealdir.

— lonesomeday

Oh, ve qS/qSAherhangi bir öğe bağlamından kullanılabilir, ancak gEBIyalnızca documentbağlamdan kullanılabilir .

getElementByIdSeçicilere göre arama idyaparken, DOM düğümlerini bulmak için özniteliklerle eşleşir querySelector. Yani geçersiz bir seçici için, örneğin <div id="1"></div>, öznitelikle eşleşmesini söylemediğiniz sürece, başarısız olduğu sürece getElementById('1')işe yarayacaktır (örn .querySelector('#1')idquerySelector('[id="1"]')

— Samuel Elh

Sadece bir Bilginize Bunu duyan kimse için değil querySelectorve querySelectorAlltam olarak artık destekleniyor. caniuse.com/#feat=queryselector

— Telarian

Yanıtlar:

132

"Daha iyi" özneldir.

querySelector yeni özelliktir.

getElementByIddaha iyi destekleniyor querySelector.

querySelectordaha iyi destekleniyor getElementsByClassName.

querySelectorgetElementByIdve ile ifade edilemeyen kurallara sahip öğeleri bulmanızı sağlargetElementsByClassName

Herhangi bir görev için uygun aracı seçmeniz gerekir.

(Yukarıdakileri querySelectorokumak için querySelector/ querySelectorAll).

— Quentin
kaynak

querySelector desteği: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - Tarayıcıdan tarayıcıya değişiklik gösterme olasılığı düşüktür.

— Quentin

Çok güzel cevap ve işte bazı kıyaslama testleri

— angel.bonev

neden daha iyi düzen desteklenen: getElementById> querySelector> getElementsByClassName, düşündüm çünkü getElementsByClassNameaynı seviyede destek olmalıdır getElementById?

— Lei Yang

Bu cevap, özellikle performans açısından yöntemler arasındaki farka değinmiyor gibi görünüyor.

— Dror Bar

İşlevler getElementByIdve getElementsByClassNameçok özeldir querySelectorve querySelectorAlldaha ayrıntılıdır. Tahminim, aslında daha kötü bir performans sergileyecekleri.

Ayrıca, hedeflediğiniz tarayıcılardaki her bir işlevin desteğini kontrol etmeniz gerekir. Ne kadar yeni olursa, destek eksikliği veya işlevin "hatalı" olma olasılığı o kadar yüksektir.

— Thiago Negri
kaynak

@thomas bağlantınız kesildi. Herhangi bir yerde çalışan bir bağlantı var mı?

— user5508297

Birkaç arşivlenmiş sürüm vardır: web.archive.org/web/20160108040024/http://jsperf.com/… Ancak test aslında çok eskidir (2010), bu nedenle sonuç daha modern motorlarda çok farklı olabilir.

— thomas

Arşivlenen sayfa aslında dinamiktir ve testi mevcut tarayıcınızda yeniden çalıştırmanıza izin verir. querySelectorAll, bildirildiğine göre tarayıcımda yaklaşık% 37 oranında daha yavaş. (Chrome 71 - vgy.me/TwGL3o.png ) Ayrıca getElementById'in canlı bir sonuç döndürdüğünü de belirtmek gerekir, yani DOM'u değiştirirseniz, değişiklik getElementByID (kapsam dahilindeyse) tarafından elde edilen sonuç tarafından yansıtılırken nodelist querySelectorAll tarafından döndürülen bir anlık görüntüdür, örneğin her şey çağrının yapıldığı sırada olduğu gibi, sonuç DOM'da sonraki değişiklikleri yansıtmayacaktır.

— W.Prins

nodelist ... is not livebunun için belge sağlayabilir misin? @ W. Her iki yöntem de Elementtürü döndürür .

— Maximilian Burszley

Ah, bir yazım hatası yaptığımı görüyorum, lütfen özürlerimi kabul edin! "GetElementByClassName" yazdığım yerde "getElementByClassName" yazmalıydım, örneğin canlı bir sonuç kümesi döndüren getElementsByClassName (ve benzeri). Aslında hem getElementsByClassName hem de querySelectorAll bir NodeList döndürüyor, ancak önceki durumda canlı ve ikincisinde bu bir anlık görüntü.

— W. Prins