DOM NodeList, JavaScript ile HTML, XHTML ve XML belgelerindeki öğeleri toplamak için kullanılan bir nesnedir Bu yazıda, DOM NodeList'in nedir ve nasıl kullanıldığına dair ayrıntılı bilgi bulabilirsiniz NodeList, DOM öğeleriyle çalışırken hayati bir öneme sahiptir ve web geliştiricileri için çok önemlidir Yazıyı okuyarak NodeList kullanımını öğrenebilir ve web sayfalarınızın kontrolünü ele alabilirsiniz

DOM NodeList, belirli bir web sayfasının Document Object Model yapısı içinde bulunan öğelerin koleksiyonudur. Kısacası, bir web sayfasındaki öğelerin listesini oluşturur. Bu Node List, web sayfasındaki belirli öğeleri seçmek ve manipüle etmek için oldukça önemli bir araçtır.

NodeList, DOM yolu veya DOM fonksiyonları kullanılarak oluşturulabilir. Örneğin, querySelectorAll() yöntemi, belirli bir CSS seçicisi kullanarak öğelerin koleksiyonunu seçmek için kullanılır. Öte yandan, childNodes yöntemi, belirli bir öğenin çocuk öğelerinin listesi oluşturmak için kullanılabilir.

NodeList, öğeleri taranabilen bir dizi gibi davranır ve her bir öğeye erişmek için index değerleri kullanılır. Bunun yanı sıra, NodeList'in uzunluğunu elde etmek için length özelliği kullanılabilir. Ayrıca, NodeList üzerinde her bir öğe için işlem yapmak için forEach() yöntemi veya belirli bir öğeye erişmek için item() yöntemi kullanılabilir.

NodeList, web sayfalarını dinamik hale getirmek için oldukça kullanışlı bir araçtır. Örneğin, belirli bir sınıfa sahip tüm öğelerin içeriklerini birden değiştirmeniz gerektiğinde NodeList'i kullanabilirsiniz. Her bir öğenin içeriğini değiştirmek için NodeList ve forEach() yöntemini kullanarak hızlı bir şekilde yapabilirsiniz.

NodeList'in, web sayfasına dinamizm kazandıran ve birçok farklı senaryoda işlevsel olan bir özellik olduğu açıktır. Bu nedenle, web geliştirme sürecinde NodeList'i anlamak ve etkin bir şekilde kullanmak oldukça önemlidir.

NodeList Nedir?

NodeList, bir web sayfası veya bir belge ağacındaki öğelerin, yani elementlerin, attribute'ların veya text'lerin koleksiyonudur. Kısacası, NodeList, DOM'da tüm belge öğelerinin bir listesidir. NodeList, HTMLCollection'ın bir alt kümesidir.

NodeList genellikle belirli bir öğeler kümesine başvurulduğunda oluşur. Örneğin, bir JavaScript kodunda belirli bir öğeler kümesi seçmek için querySelectorAll() yöntemi kullanılır. Bu yöntem bir CSS seçicisi kullanarak öğelerin belirli bir kümesini seçer ve NodeList olarak döndürür. Benzer şekilde, childNodes yöntemi kullanılarak da NodeList oluşturulabilir. Bu yöntemde, bir öğenin tüm çocukları NodeList olarak döndürülür.

Bu öğelerin koleksiyonu, web sayfasının (belgenin) düzenini ve yapısını temsil eder. NodeList, JavaScript kullanarak DOM'a erişildiğinde oluşan bir nesnedir. NodeList'in öğeleri, index değerleri aracılığıyla tek tek elemanlarına erişilebilir.

Ayrıca, length özelliği de NodeList'in öğe sayısını verir. Özetle, NodeList, belirli öğelere referans veren bir referans listesidir ve belge ağacındaki öğelerle çalışmak için kullanılır.

NodeList Nasıl Oluşturulur?

NodeList, bir döküman ağacında yer alan öğelerin koleksiyonudur. Bu nedenle, NodeList'in oluşturulması için öncelikle DOM yapısının anlaşılması gerekmektedir. NodeList, DOM yolları veya çeşitli DOM fonksiyonları kullanarak oluşturulabilir.

Bir yol, querySelectorAll() kullanmaktır. Bu yöntem, belirli bir öğe kümesini seçmek için CSS seçicilerini kullanır. Örneğin, "div" etiketlerine sahip tüm öğeleri seçmek istiyorsak, document.querySelectorAll("div") kullanabiliriz.

Diğer bir yol, NodeList'i childNodes özelliğini kullanarak oluşturmaktır. Bu, bir elementin tüm çocuk öğelerini listeleyen bir NodeList döndürür. Örneğin, document.body.childNodes kullanarak belirli bir öğenin tüm alt öğelerini alabiliriz.

NodeList, öğeleri taranabilen bir dizi gibi davranır ve index değerleri kullanarak tek tek elemanlarınıza erişebilirsiniz. Bunun dışında, NodeList üzerinde işlemler yapmanızı sağlayan iki adet yöntem bulunmaktadır.

Bunlardan biri, her bir öğe üzerinde işlem yapmaya olanak tanıyan forEach() yöntemidir. Bu yöntem, NodeList'in tüm öğelerini döngü ile gezerek her bir öğe üzerinde işlem yapmamıza olanak sağlar.

Diğeri ise, NodeList'de belirli bir öğeye erişmeye olanak sağlayan item() yöntemidir. NodeList öğelerine index değerleriyle erişebiliriz. Örneğin, document.getElementsByTagName("li").item(0), ilk li öğesine erişir.

Bunların yanı sıra, NodeList üzerinde öğe sayısını kontrol etmek için length özelliğini kullanabiliriz. Bu özellik, NodeList'in öğe sayısını döndürür.

querySelectorAll()

querySelectorAll() metodunun kullanımıyla birlikte belirli bir öğe kümesi seçiminde CSS seçicileri kullanılabilir. Bu metod NodeList'i döndürür, NodeList ise DOM öğelerinin koleksiyonudur. Çoklu öğelerin seçimi için kullanılabilen bu metodla, öğeleri aramak ve bulmak daha kolay hale gelir.

Bu metodun en temel özellikleri şunlardır:

• CSS seçicileri kullanarak öğeler seçmek
• Seçilen öğeler aynı sırayla bir NodeList'e atanır
• Kurala uyan öğelerin özniteliklerinin değerleri alınabilir

querySelectorAll() metodunun öne çıkan özelliklerinden biri, CSS seçicisi kullanarak belirli bir öğe kümesini seçebilme imkanı vermesidir. Bu seçici işlemi sayesinde, aynı özniteliklere sahip veya belirli bir öznitelik değerine sahip öğeleri kolayca bulabilirsiniz.

Örneğin, aynı sınıf adına sahip öğeleri seçmek için, ".classname" kullanabilirsiniz. Aynı şekilde belli bir özniteliğe sahip öğeleri seçmek için "[attribute=value]" yapısı kullanılabilir.

querySelectorAll() metodunun kullanım örnekleri şöyle özetlenebilir:

childNodes

Yani, NodeList oluşturmak için kullanabileceğimiz bir diğer yöntem ise çocuk öğeleri listesini kullanmaktır. Çocuk öğeleri, belirli bir öğenin altındaki tüm öğeleri içeren bir lista olarak tanımlanabilir. Böylece, NodeList oluşturmak için çocuk öğelerinden oluşan bir liste oluşturabiliriz.

Çocuk öğeleri listesini oluşturmak için, parent öğesinin childNodes özelliğine erişmemiz gerekir. Bu özellik, belirli bir öğenin altındaki tüm öğeleri içeren bir NodeList döndürür. Daha sonra, bu NodeList üzerinde forEach() yöntemi kullanarak her bir öğeyi işleyebiliriz.

const parent = document.getElementById('parentElement');

const children = parent.childNodes;

children.forEach(child => {  console.log(child.nodeName);});

Yukarıdaki örnekte, öncelikle parentElement ID'sine sahip öğe seçilir ve daha sonra bu öğenin altındaki tüm çocuk öğeleri içeren bir NodeList oluşturulur. Son olarak, elde edilen NodeList üzerinde forEach() yöntemi kullanılarak her bir öğe için nodeName'i konsola yazdırılır.

NodeList Nasıl Kullanılır?

NodeList, bir dizi gibi çalışır ve her bir öğenin index değeri aracılığıyla tek tek erişilebilir. Bu nedenle, NodeList üzerinde gezinmek oldukça kolaydır. İlk olarak, NodeList üzerinde gezinmek için forEach() yöntemi kullanılabilir. Bu yöntem, NodeList içindeki her öğe için belirtilen fonksiyonu çalıştırır.

Diğer bir yöntem olan item() yöntemi kullanılarak öğeleri index değerleri kullanarak erişilebilir. Bu yöntem, belirli bir öğeye tek tek erişim sağlayabilir. Ayrıca, NodeList'in öğe sayısı length özelliği kullanılarak alınabilir. Bu sayede, NodeList'deki öğelerin sayısını kolayca öğrenebilirsiniz.

• For loop kullanarak NodeList üzerinde dolaşabilirsiniz.
• item() metodu ile belirli bir öğeye erişebilirsiniz.
• forEach() metodu ile NodeList'in öğeleri üzerinde işlem yapabilirsiniz.

NodeList ile ilgili en iyi şeylerden biri, onu bir dizeye dönüştürmenizin veya bir diziye dönüştürmenizin kolay olmasıdır. Dizi veya dize üzerinde yapabileceğiniz herhangi bir işlemi NodeList üzerinde de yapabilirsiniz.

forEach()

NodeList, bir döküman ağacında (DOM'da) öğelerin koleksiyonudur ve forEach() yöntemi ile NodeList üzerinde her bir öğe işlenebilir. Bu yöntem sayesinde, NodeList'deki her bir öğe üzerinde ayrı ayrı işlem yapılabilir ve bu işlem öğelere bağımsız olarak uygulanır.

Bu yöntemin kullanımı oldukça basittir; öncelikle NodeList üzerinde bir forEach() döngüsü oluşturulur. Döngü içindeki fonksiyon her bir öğe üzerinde işlem yapar. Bu fonksiyon, öğenin index değerine ve öğenin kendisine erişebilir.

Örneğin, aşağıdaki kod, NodeList içindeki her bir öğenin metnini büyük harfle yazdırır:

```let nodeList = document.querySelectorAll('p');nodeList.forEach(function(element) { let text = element.textContent; element.textContent = text.toUpperCase();});```

Burada, öncelikle querySelectorAll() yöntemi kullanılarak tüm paragraf öğeleri NodeList olarak seçilir ve nodeList değişkenine atanır. Daha sonra forEach() yöntemi, nodeList üzerinde döngü oluşturmak için kullanılır. Fonksiyon içinde, her bir öğenin textContent özelliği kullanılarak içeriği alınır ve toUpperCase() yöntemi kullanılarak büyük harfe dönüştürülür. Son olarak, öğenin textContent özelliği tekrar ayarlanır.

Bu örnek gösteriyor ki, forEach() yöntemi NodeList üzerinde işlemleri kolaylaştırabilir ve daha okunaklı hale getirebilir. Yalnızca basit bir fonksiyon kullanarak, NodeList'deki öğelere ayrı ayrı işlem yapılabilmesi mümkündür.

item()

NodeList'in öğelerine erişmenin bir diğer yolu da item() yöntemidir. Bu yöntem, öğelerin index değerlerini kullanarak tek tek elemanlarına erişmek için kullanılır. Örneğin, aşağıdaki kod, bir 'ul' etiketinden oluşan NodeList'in ikinci öğesine erişir:

• Öğe 1
• Öğe 2
• Öğe 3

item() yöntemi genellikle forEach() yöntemi gibi NodeList'in tamamını işleme ihtiyacı olmadığında kullanılır. Özellikle büyük NodeList'lerle çalışırken, gereksiz yere tüm öğeleri işleme yoluna gitmek yerine, istenen öğeye doğrudan index değeri kullanarak erişebilirsiniz. Ayrıca, özellikle büyük NodeList'lerle çalışırken, NodeList'in uzunluğunu kontrol etmek için length özelliğini kullanmak, performans açısından daha iyi bir seçenektir.

length

NodeList'in öğelerinin sayısını öğrenmek için length özelliği kullanılır. Bu özellik, NodeList'in kaç öğe içerdiğini verir. Örneğin, aşağıdaki kodda bir NodeList oluşturulmuştur:

var links = document.querySelectorAll("a");console.log(links.length);

Bu kod, tüm a etiketlerini seçer ve links değişkenine NodeList olarak atanır. Daha sonra, console.log() metodu kullanılarak NodeList'teki öğelerin sayısı yazdırılır.

Buna ek olarak, length özelliği ile bir NodeList'in boş olup olmadığını da kontrol edebilirsiniz. Örneğin, aşağıdaki kod bloğu, bir form elemanı olup olmadığını kontrol eder:

var form = document.querySelectorAll("form");if(form.length > 0) {  console.log("Form found.");} else {  console.log("Form not found.");}

Bu kod, bir form etiketi olup olmadığını arar. Form etiketi varsa, "Form found." metni yazdırılır; aksi takdirde "Form not found." metni yazdırılır.

NodeList'in öğe sayısı, liste

veya
etiketi kullanılarak gösterilebilir. Örneğin:
• Öğe 1
• Öğe 2
• Öğe 3

Bu listede, NodeList'in öğe sayısı 3 olarak belirtilmiştir.