Dapatkan elemen dari javascript nodelist

Sebagai pengembang web, ada banyak situasi di mana kami ingin melintasi DOM dan menemukan elemen tertentu

Jadi, bagaimana tepatnya kita menemukan objek di NodeList di JavaScript?

const nodes = document.querySelectorAll('p');

Kami sekarang memiliki NodeList dengan banyak objek

Karena NodeList sebenarnya bukan Array, bagaimana kita melintasinya pada awalnya tidak jelas. Namun, kita dapat melakukannya dengan relatif mudah setelah mengonversi NodeList menjadi array dan menggunakan beberapa metode manipulasi

Cara ES6 terbaru

const foundParagraph = Array.from(nodes).find((node) => node === nodeRefToFind);

// note: nodeRefToFind must be the exact object you are looking for

Kami mengubah NodeList paragraf kami menjadi Array menggunakan Array.from. Dan gunakan .find()_ untuk mencocokkan item yang diinginkan

Tahukah Anda bahwa Javascript tidak mengklasifikasikan pilihan beberapa elemen sebagai array? . Daftar simpul pada dasarnya adalah daftar elemen. Untuk menghasilkan NodeList_, kita dapat melakukan hal seperti ini

let myNodeList = document.querySelectorAll('p');

Kode di atas akan menampilkan daftar semua paragraf yang ditemukan di halaman sebagai NodeList

Daftar node menarik karena bukan array, sehingga tidak mewarisi semua fungsi berbeda yang dimiliki array. Salah satu contoh penting adalah bahwa, di beberapa browser lama, seperti Internet Explorer, NodeLists tidak mewarisi fungsi

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Dengan demikian, jika Anda ingin menambahkan pendengar acara ke setiap paragraf, kode berikut akan menimbulkan kesalahan di Internet Explorer

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Karena ini berfungsi di sebagian besar browser modern, Anda biasanya tidak perlu khawatir menggunakan ini, tetapi jika Anda ingin mendukung browser lama dan menggunakan

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
 item.addEventListener('click', function(e) {
 // Do some click events
 });
 // For each node item..
});

let myNodeList = document.querySelectorAll('p');
Array.prototype.forEach.call(myNodeList, function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Agak rumit, tetapi sekarang kami dapat memastikan semua pengguna kami dapat mengakses event listener yang kami tambahkan ke item NodeList kami

Fungsi apa yang didukung oleh NodeLists?

Karena artikel ini berfokus pada bagaimana NodeLists tidak selalu memiliki

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

• Daftar Node. entri - mengembalikan iterator untuk mendapatkan id dan elemen sebagai pasangan id/element, i. e.

  let myNodeList = document.querySelectorAll('p');
  
  myNodeList.forEach(function(item) {
      item.addEventListener('click', function(e) {
          // Do some click events
      });
      // For each node item..
  });
  

  6
• Daftar Node. forEach - untuk mengulangi setiap item satu per satu
• Daftar Node. item - untuk mendapatkan item tertentu dengan id, i. e. dapatkan paragraf pertama dengan

  let myNodeList = document.querySelectorAll('p');
  
  myNodeList.forEach(function(item) {
      item.addEventListener('click', function(e) {
          // Do some click events
      });
      // For each node item..
  });
  

  _7
• Daftar Node. kunci - mengembalikan iterator untuk mendapatkan kunci, i. e. 1 2 3 4 5
• Daftar Node. nilai - mengembalikan iterator untuk mendapatkan elemen HTML, i. e. p p p p

Perlu dicatat bahwa

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Bagaimana cara mendapatkan elemen dari NodeList?

Bagaimana cara mendapatkan simpul dari NodeList?

Bisakah Anda mengulang melalui NodeList di JavaScript?

Bagaimana cara memilih daftar simpul di js?