Mengapa Mengulang HTMLCollection dengan `for/of` Kadangkala Gagal, dan Apakah Alternatifnya?

Menyalurkan HTMLCollection dengan untuk/daripada

Apabila cuba mengulang HTMLCollection menggunakan untuk/daripada, anda mungkin menemui hasil yang tidak dijangka. Mari kita selidiki sebab perkara ini berlaku dan teroka pendekatan alternatif untuk mengulang elemen HTMLCollection.

Mengapa untuk/dalam Gagal

Isu menggunakan untuk/dalam ialah ia berulang sifat objek, bukan unsurnya. HTMLCollection ialah objek seperti tatasusunan, bermakna ia mengandungi elemen pada indeks. Walau bagaimanapun, ia juga mempunyai sifat seperti length dan namedItem.

Apabila anda menggunakan for/in pada HTMLCollection, ia akan mengembalikan kedua-dua indeks elemen (0, 1, 2, ...) dan sifat koleksi. Ini membawa kepada output yang tidak dijangka, di mana sesetengah lelaran mengembalikan ID elemen manakala yang lain tidak ditentukan (sifat bukan elemen).

Kaedah Lelaran Alternatif

Untuk mengelakkan isu ini, terdapat adalah beberapa alternatif kepada untuk/dalam:

• untuk/daripada Gelung:

  Pelayar moden menyokong/untuk lelaran objek HTMLCollection dan NodeList. Ini adalah pendekatan yang paling mudah dan paling mudah.

    var list = document.getElementsByClassName("events");
    for (let item of list) {
     console.log(item.id);
    }

• Array.from():

  ES6 memperkenalkan Array.from() kaedah, yang menukar objek seperti tatasusunan kepada tatasusunan sebenar. Anda kemudiannya boleh mengulanginya menggunakan untuk/daripada.

  Array.from(document.getElementsByClassName("events")).forEach(item => {
      console.log(item.id);
  });

• Menambah Lelaran Tatasusunan Secara Manual:

  Dalam penyemak imbas yang tidak sokongan untuk/daripada asli, anda boleh menambah lelaran Array secara manual pada HTMLCollection atau NodeList prototaip.

  NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
  
  // Use for/of as with modern browsers
  for (let item of list) {
      console.log(item.id);
  }

• untuk Gelung dengan Sifat Panjang:

  Pendekatan yang lebih tradisional ialah menggunakan gelung for yang berulang sehingga panjang koleksi.

  var list = document.getElementsByClassName("events");
  for (var i = 0; i < list.length; i++) {
      console.log(list[i].id);
  }

Dengan menggunakan kaedah alternatif ini, anda boleh mengulangi elemen HTMLCollection dengan berkesan dan mengakses sifatnya, termasuk IDnya.

Atas ialah kandungan terperinci Mengapa Mengulang HTMLCollection dengan `for/of` Kadangkala Gagal, dan Apakah Alternatifnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!