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

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”);
})
}

 

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”);
});
}

 

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”);
})
});

 

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”]

 

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”);
})
});

 

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”);
});
});

 

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”);
});
})

 

let list = document.querySelectorAll(‘li’);

 

list.forEach((el, key) => {

  el.addEventListener(“click”, () => {

    // console.log(“click”);

  });

})

 

Yorum Yap

0 Yorum yapan