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
|
1 2 3 4 5 6 7 8 9 |
let list = document.querySelectorAll('li'), i; for (i = 0; i < list .length; ++i) { list[i].addEventListener("click", () => { // console.log("click"); }) } |
2. For..of
|
1 2 3 4 5 6 7 8 9 |
const lists = document.querySelectorAll('li'); for (const list of lists) { list.addEventListener("click", () => { // console.log("click"); }); } |
3. Array.from
|
1 2 3 4 5 6 7 8 9 |
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.
|
1 2 3 4 5 |
Array.from("Element"); // çıktı: ["E", "l", "e", "m", "e", "n", "t"] |
4. Spread Operatörü ile
|
1 2 3 4 5 6 7 8 9 |
let list = document.querySelectorAll('li'); [...list].forEach((el, key) => { el.addEventListener("click", () => { // console.log("click"); }) }); |
5. Call Metodunu kullanarak
|
1 2 3 4 5 6 7 8 9 |
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.
|
1 2 3 4 5 6 7 8 9 |
let list = document.querySelectorAll('li'); list.forEach((el, key) => { el.addEventListener("click", () => { // console.log("click"); }); }) |
