JavaScript’te birden fazla öğe seçmek istediğimizde genel olarak aşağıdaki gibi seçiciler kullanırız.
JavaScript’te birden fazla öğe seçmek istediğimizde genel olarak aşağıdaki gibi seçiciler kullanırız.
1. document.getElementsByClassName();
2. document.querySelectorAll();
Bu seçiciler bize bir çıktı verirler. Burada bize dönen sonuçların nasıl çalıştıklarını anlamamız bizim açımızdan önemli olabilmektedir.
1. HTMLCollection
Elementleri seçerken kullandığımız getElementsByClassName() ve getElementsByTagName() gibi seçiciler bize canlı bir HTMLCollection döndürür.
2. NodeList
Bir diğer seçici olan querySelectorAll() ise bize statik bir NodeList döndürür. Dönen sonuç diziye benzer ama değildir.
Fakat NodeList, nasıl eriştiğinize bağlı olarak farklı davranır; elementlere childNodes kullanarak erişirseniz, döndürülen liste canlıdır ve düğüme daha fazla öğe eklendikçe güncellenir. querySelectorAll() kullanılarak erişilirse, döndürülen liste statiktir ve düğüme daha fazla öğe eklenirse güncellenmez.
Canlı ve statik düğüm arasındaki temel fark; DOM’a bir öğe eklendiğinde, canlı bir düğümün yeni öğeyi tanıyacağı ancak statik düğümün ise tanımayacağıdır.
Aşağıda konuyla bir örnek bulunmakta:
See the Pen
abmXwro by Hakan (@hbaykara)
on CodePen.
Kaynaklar:
HtmlCollection
NodeList
HTMLCollection ve NodeList arasındaki fark