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
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.. }); 2Dengan 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.. }); 3, kita harus membuang NodeList kita ke dalam array, seperti itulet 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.. }); 3 secara default, Anda mungkin bertanya-tanya fungsi apa yang dapat dijalankan pada NodeList. Ada 5- 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.. }); _8 adalah satu-satunya fungsi yang didukung oleh Internet Explorer. Sisanya tidak