querySelectorAll() ile seçilen elementlere tıklama etkinliği nasıl eklenir?

JavaScript’de etiketleri querySelectorAll() yöntemi ile seçtiğimizde bize bir NodeList Nesnesi (DOM öğelerinin listesi) döndürmektedir. Dönen sonuç diziye benzer ama değildir.

Bu yöntem tarafından döndürülen bir NodeList Nesnesi (DOM öğelerinin listesi) üzerinde döngü yapmanın birçok yolu bulunmakta, bu döngü yöntemlerinden bazılarını kullanarak elementlerimize tıklama etkinliği kazandırabiliriz.
 
Bu yazıda bazılarını paylaşmak istiyorum.
 
1. For-loop

let list = document.querySelectorAll(‘li’), i;
for (i = 0; i < list .length; ++i) { list[i].addEventListener("click", () => {
// console.log(“click”);
})
}

 
2. For..of

const lists = document.querySelectorAll(‘li’);
 
for (const list of lists) {
list.addEventListener(“click”, () => {
// console.log(“click”);
});
}

3. Array.from

const list = document.querySelectorAll(‘li’);
Array.from(list).forEach((el, key) => {
el.addEventListener(“click”, () => {
// console.log(“click”);
})
});

 
Array.from nedir?
Array.from() metodu bir dizi benzeri veya gezinilebilir bir nesneden yeni bir Dizi örneği oluşturur.

Array.from(“Element”);
// çıktı: [“E”, “l”, “e”, “m”, “e”, “n”, “t”]

 
4. Spread Operatörü ile

let list = document.querySelectorAll(‘li’);
[…list].forEach((el, key) => {
el.addEventListener(“click”, () => {
// console.log(“click”);
})
});

 
5. Call Metodunu kullanarak

let list = document.querySelectorAll(‘li’);
[].forEach.call(list, function (el) {
el.addEventListener(“click”, () => {
// console.log(“click”);
});
});

6. NodeList.forEach() Metodu
Bu özelliği IE11 gibi bazı eski tarayıcılar desteklemiyor.

let list = document.querySelectorAll(‘li’);
list.forEach((el, key) => {
el.addEventListener(“click”, () => {
// console.log(“click”);
});
})