NodeList ve HTMLCollection: Canlı ve Statik Koleksiyonlar Arasındaki Fark

NodeList ve HTMLCollection: Canlı ve Statik Koleksiyonlar Arasındaki Fark

JavaScript’te web sayfalarıyla etkileşim kurmak için sıklıkla NodeList ve HTMLCollection kullanılır. Bu iki nesne, HTML belgesindeki elementleri temsil eden koleksiyonlardır. Ancak, aralarında önemli bir fark vardır: NodeList canlı koleksiyonlar iken, HTMLCollection statik koleksiyonlardır. Bu makalede, NodeList ve HTMLCollection arasındaki farkları ele alarak, hangi durumlarda hangisinin kullanılması gerektiğini inceleyeceğiz.

NodeList: Canlı Koleksiyonlar

NodeList, HTML belgesindeki elementlerin canlı bir listesini tutan bir nesnedir. “Canlı” olması, HTML belgesindeki herhangi bir değişikliğin NodeList’i de etkilediği anlamına gelir. Örneğin, bir element eklendiğinde veya silindiğinde, NodeList otomatik olarak güncellenir.

NodeList’i kullanmanın en yaygın yolu, document.querySelectorAll() veya document.getElementsByTagName() gibi yöntemleri kullanmaktır. Bu yöntemler, seçilen elementlerin canlı bir listesini döndürür.

İşte NodeList’in canlı olduğunu gösteren bir örnek:

“`html

“`

Yukarıdaki örnekte, paragraphs değişkeni #container içindeki tüm p elementlerini içeren canlı bir NodeList’e atandı. İlk console.log() çağrısı 2 çıktısı verir çünkü başlangıçta iki p elementi vardır. Daha sonra yeni bir p elementi eklendi. paragraphs NodeList canlı olduğu için, ikinci console.log() çağrısı 3 çıktısı verir.

HTMLCollection: Statik Koleksiyonlar

HTMLCollection, HTML belgesindeki elementlerin statik bir listesini tutan bir nesnedir. “Statik” olması, HTML belgesindeki değişikliklerin HTMLCollection’ı etkilemediği anlamına gelir. Örneğin, bir element eklendiğinde veya silindiğinde, HTMLCollection güncellenmez.

HTMLCollection’ı kullanmanın en yaygın yolu, document.getElementsByClassName() veya document.getElementById() gibi yöntemleri kullanmaktır. Bu yöntemler, seçilen elementlerin statik bir listesini döndürür.

İşte HTMLCollection’ın statik olduğunu gösteren bir örnek:

“`html

“`

Yukarıdaki örnekte, paragraphs değişkeni my-class sınıfına sahip tüm p elementlerini içeren statik bir HTMLCollection’a atandı. İlk console.log() çağrısı 2 çıktısı verir çünkü başlangıçta iki p elementi my-class sınıfına sahiptir. Daha sonra yeni bir p elementi my-class sınıfıyla eklendi. Ancak, paragraphs HTMLCollection statik olduğu için, ikinci console.log() çağrısı yine 2 çıktısı verir.

NodeList ve HTMLCollection’ı Ne Zaman Kullanmalı?

Bir NodeList veya HTMLCollection kullanmanız gerektiğinde, aşağıdaki hususları göz önünde bulundurmalısınız:

• Canlı Koleksiyonlar mı Statik Koleksiyonlar mı İhtiyacınız Var? NodeList canlıdır, bu nedenle DOM’de yapılan değişikliklere göre güncellenir. HTMLCollection ise statiktir ve DOM’de yapılan değişikliklerden etkilenmez.
• Performans: NodeList’in canlı olmasından dolayı, statik bir HTMLCollection’dan daha fazla işlem gücü gerektirebilir. Bir element eklendiği veya silindiği zaman NodeList yeniden hesaplanır. Bu nedenle, performans kritik olduğunda, bir HTMLCollection daha iyi bir seçim olabilir.
• JavaScript Kütüphaneleri: Bazı JavaScript kütüphaneleri NodeList’i kullanır ve diğerleri HTMLCollection kullanır. Kullandığınız kütüphane dokümantasyonunu kontrol ederek, hangi koleksiyon türünü kullanacağınızı belirleyebilirsiniz.

Sonuç

NodeList ve HTMLCollection, JavaScript’te web sayfalarıyla etkileşim kurmanın iki farklı yoludur. NodeList, canlı bir koleksiyon iken, HTMLCollection statik bir koleksiyonudur. Hangi koleksiyon türünü kullanacağınızı belirlemek için, canlı veya statik bir koleksiyona ihtiyaç duyup duymadığınızı, performansı ve kullandığınız JavaScript kütüphanelerini göz önünde bulundurmanız önemlidir.

Özet

Bu makalede, NodeList ve HTMLCollection arasındaki farkları ele aldık ve hangi durumlarda hangisinin kullanılması gerektiğini inceledik. NodeList, DOM’deki değişiklikleri takip eden canlı bir koleksiyon iken, HTMLCollection statik bir koleksiyon olup DOM’deki değişikliklerden etkilenmez. Hangi koleksiyona ihtiyaç duyduğunuza, performansa ve kullandığınız JavaScript kütüphanelerine bağlı olarak, doğru seçim yapabilirsiniz.

Daha fazla bilgi ve örnek için, kendi web sitemi fatihsoysal.com ziyaret edebilirsiniz.

#Etiketler
NodeList, HTMLCollection, Canlı Koleksiyon, Statik Koleksiyon, JavaScript, DOM, Web Geliştirme, Performans, Kütüphane, Web Sayfası, Elementler, Koleksiyon, Fark, Kullanım, Örnek, Değişiklikler, Güncelleme, İşlem Gücü, Dokümantasyon, Seçim, Kütüphane, Javascript Kütüphaneleri, HTML Belgesi, Web Sayfası ile Etkileşim, Javascript Web Geliştirme