Làm sao để duyệt NodeList trong JavaScript?

Bài đăng này đã không được cập nhật trong 2 năm

NodeList là kết quả thu được khi bạn sử dụng document.querySelectorAll(). NodeList khá giống Array, nhưng không phải hoàn toàn. Vậy làm sao để duyệt NodeList?

Bài viết này, mình sẽ tổng hợp lại một số cách giúp bạn duyệt NodeList trong JavaScript. Mời bạn theo dõi bài viết!

Sử dụng for-loop duyệt NodeList

For-loop là cách truyền thống để duyệt NodeList. Và cách này được support bởi 96.69% các trình duyệt.

var elems = document.querySelectorAll('.some-selector');
var length = elems.length;

for (var i = 0; i < length; i++) {
    console.log(i); // index
    console.log(elems[i]); // value
}

Trong đoạn code trên, mình đã lưu lại giá trị của elems.length vào biến length. Mục đích là để tối ưu thời gian cho vòng lặp. Bởi nếu không làm như vậy, trong mỗi lượt của vòng lặp, bạn phải gọi lại elems.length => sẽ khá mất thời gian.

Sử dụng for..of duyệt NodeList

Thực chất, for..of cho phép duyệt iterable objects (bao gồm String, Array, Array-like arguments, NodeList Objects, TypedArray, Map và Set). Và cách này được hỗ trợ bởi hầu hết các trình duyệt hiện đại, trừ IE11 và thấp hơn.

const elems = document.querySelectorAll('.some-selector');
for (const el of elems) {
	console.log(el); // value
}

Tuy nhiên với for..of, bạn sẽ chỉ thu được value mà không có index như cách sử dụng for-loop bên trên.

Sử dụng forEach duyệt NodeList

Tương tự như for..of, forEach cũng chỉ được hỗ trợ bởi các browser hiện đại. Về cách sử dụng nó thì cũng không khác gì so với forEach trong Array.

const elems = document.querySelectorAll('.some-selector');

elems.forEach(function (elem, index) {
    console.log(index); // index
    console.log(elem); // value
});

Sử dụng Spread với forEach

Với spread syntax của ES6, bạn có thể tạo mới một Array từ NodeList. Và sau đó, bạn không chỉ dùng được forEach() mà bất kỳ các phương thức nào của Array như: map(), filter(), reduce(),...

const elems = document.querySelectorAll('.some-selector');

[...elems].forEach(function (elem, index) {
  console.log(index); // index
  console.log(elem); // value
});

Tự tạo phương thức forEach với for-loop

Có lẽ đây là cách lý tưởng nhất nếu bạn muốn được support bởi hầu hết các trình duyệt mà vẫn đảm bảo code rõ ràng, dễ hiểu như cách bạn sử dụng phương thức forEach(). Dưới đây là đoạn code mình tham khảo của Todd Motto.

// Định nghĩa forEach
var forEach = function (array, callback, scope) {
  var length = array.length;

  for (var i = 0; i < length; i++) {
    callback.call(scope, i, array[i]);
  }
};

// Cách sử dụng
var elems = document.querySelectorAll('.some-selector');
forEach(elems, function (index, elem) {
  console.log(index); // index
  console.log(elem); // value
});