Tutorial Javascript 48: Mengenal Javascript Nodelist

Last Updated on January 26, 2024 by APPKEY-YOGI

Dalam pengembangan web menggunakan JavaScript, sering kali kita berinteraksi dengan DOM (Document Object Model). Salah satu konsep penting dalam manipulasi DOM adalah NodeList. Pada Tutorial kali ini, kita akan mengenal lebih dalam tentang Javascript NodeList, bagaimana ia bekerja dan bagaimana cara kita menggunakannya dalam kode JavaScript. Yuk simak selengkapnya dibawah ini!

Apa itu NodeList?

NodeList adalah kumpulan (collection) dari node yang seringkali dihasilkan oleh metode seperti document.querySelectorAll(). Walaupun NodeList serupa dengan Array, ia tidak memiliki semua metode yang dimiliki oleh Array. Sebagai contoh, metode forEach() baru ditambahkan ke NodeList pada ECMAScript 2015 (ES6).

Karakteristik NodeList

Berikut adalah karakteristik dari Javascript NodeList:

Mirip Array, Tapi Bukan Array

Kalian dapat mengakses elemen-elemen di dalam javascript NodeList dengan indeks sama seperti Array. Namun, tidak semua metode Array dapat digunakan pada NodeList.

Live vs Static

Ada dua jenis javascript NodeList yaitu live dan static. document.getElementsByTagName() mengembalikan NodeList live, artinya jika DOM berubah, NodeList juga akan berubah. Sebaliknya, document.querySelectorAll() mengembalikan NodeList static yang tidak berubah jika DOM berubah.

Mengakses dan Mengelola NodeList

Berikut adalah cara-cara umum untuk mengakses dan mengelola NodeList dalam JavaScript.

Mengakses Item dalam NodeList

Untuk mengakses item dalam NodeList, kalian bisa menggunakan indeks, mirip dengan akses elemen array.

let divs = document.querySelectorAll('div');

let firstDiv = divs[0]; // mengakses elemen pertama

Looping Melalui NodeList

Kalian dapat melakukan looping melalui NodeList dengan menggunakan loop standar atau forEach().

Menggunakan for Loop

for (let i = 0; i < divs.length; i++) {

    console.log(divs[i]);

}

Menggunakan forEach (ES6):

divs.forEach(function(div) {

    console.log(div);

});

Mengonversi NodeList ke Array

Jika kalian ingin menggunakan metode Array yang tidak tersedia di NodeList, kalian bisa mengonversi NodeList ke Array terlebih dahulu.

let divsArray = Array.from(divs);

divsArray.reverse(); // Contoh menggunakan metode reverse() dari Array

Kapan Menggunakan Javascript NodeList?

NodeList adalah struktur data yang sering muncul dalam pengembangan web, terutama ketika bekerja dengan Document Object Model (DOM) di JavaScript. Meskipun mirip dengan array, NodeList memiliki karakteristik dan metode yang berbeda sehingga membuatnya unik dan berguna dalam berbagai situasi. Memahami kapan harus menggunakan NodeList dapat membantu kalian menulis kode yang lebih efisien dan efektif.

Berikut ini adalah beberapa situasi di mana penggunaan NodeList menjadi sangat berguna.

Manipulasi Massal pada Elemen DOM

Saat kalian ingin menerapkan perubahan atau melakukan manipulasi pada sejumlah elemen DOM, NodeList sangat berguna. Misalnya, kalian mungkin ingin menambahkan kelas, mengubah style atau menetapkan event listener ke semua elemen yang memiliki kelas tertentu atau yang sesuai dengan selektor CSS tertentu. Dengan document.querySelectorAll, kalian bisa mendapatkan semua elemen yang sesuai sebagai NodeList, kemudian mengiterasinya untuk menerapkan perubahan yang diinginkan.

Pemilihan Elemen Berdasarkan Kriteria

Ketika kalian perlu memilih elemen-elemen berdasarkan kriteria tertentu, seperti tag name, kelas atau id, NodeList menyediakan cara yang mudah dan intuitif untuk melakukan ini. Menggunakan metode seperti document.querySelectorAll atau document.getElementsByClassName, kalian dapat dengan cepat mengumpulkan kumpulan elemen dan bekerja dengan mereka sebagai satu grup.

Reaksi terhadap Perubahan DOM

Dalam beberapa kasus, kalian mungkin perlu menanggapi perubahan yang terjadi pada DOM. Misalnya, jika elemen ditambahkan atau dihapus, kalian mungkin ingin memperbarui NodeList atau melakukan beberapa aksi. Dalam hal ini, memahami perbedaan antara NodeList “live” dan “static” sangat penting. NodeList live secara otomatis memperbarui daftarnya untuk mencerminkan perubahan terkini pada DOM, sedangkan NodeList static tidak berubah setelah dibuat.

Optimasi Performa dalam Iterasi

Meskipun NodeList tidak memiliki semua metode array, mereka menyediakan cara yang dioptimalkan untuk mengiterasi elemen DOM. Menggunakan NodeList.forEach memungkinkan kalian untuk mengiterasi elemen dengan cara yang bersih dan efisien. Jika kalian membutuhkan metode array yang lebih canggih, kalian selalu dapat mengonversi NodeList kalian menjadi array menggunakan Array.from.

Pengembangan dengan Kompatibilitas Browser

Dalam pengembangan web, mempertimbangkan kompatibilitas lintas browser adalah suatu keharusan. NodeList telah didukung secara luas di semua browser modern, tetapi penting untuk dicatat bahwa metode tertentu (seperti NodeList.forEach) dan karakteristik NodeList (seperti perilaku “live”) mungkin berbeda atau tidak didukung di browser lama. Memahami keterbatasan ini dan melakukan pengujian yang sesuai dapat membantu memastikan bahwa situs web kalian berfungsi dengan baik di berbagai platform.

Pembacaan Kode yang Bersih dan Semantik

Menggunakan NodeList dengan benar juga dapat membantu membuat kode kalian lebih mudah dibaca dan dipahami. Dengan memanfaatkan metode dan properti yang disediakan NodeList, kalian dapat menulis kode yang lebih semantik dan mudah diikuti sehingga membuatnya lebih mudah bagi kalian dan rekan untuk memelihara dan memperbarui kode di masa mendatang.

Contoh Penggunaan Javascript Nodelist

NodeList adalah struktur data yang sering digunakan dalam pengembangan web dengan JavaScript, khususnya ketika bekerja dengan Document Object Model (DOM). Berikut adalah beberapa contoh penggunaan NodeList dalam skenario praktis.

Menerapkan Style ke Sejumlah Elemen

Kita sering perlu mengubah style sejumlah elemen sekaligus. Misalnya, kalian mungkin ingin mengubah warna background semua elemen dengan kelas tertentu.

let items = document.querySelectorAll('.highlight');

items.forEach(item => {

    item.style.backgroundColor = 'yellow';

});

Membuat Event Listener untuk Banyak Elemen

Kalian mungkin ingin menambahkan event listener ke sejumlah elemen. Misalnya, menambahkan click listener ke setiap tombol dalam sebuah form.

let buttons = document.querySelectorAll('button');

buttons.forEach(button => {

    button.addEventListener('click', () => {

        console.log('Button clicked!');

    });

});

Batch Read/Write untuk Performa

Saat bekerja dengan DOM, seringkali lebih efisien untuk membaca atau menulis ke NodeList dalam batch untuk menghindari reflow dan repaint yang berlebihan.

// Read

let heights = Array.from(document.querySelectorAll('.box')).map(div => div.clientHeight);

 

// Write

heights.forEach((height, idx) => {

    document.querySelectorAll('.mirror-box')[idx].style.height = `${height}px`;

});

Menggunakan NodeList dalam Animasi

Kalian bisa menggunakan NodeList untuk mengaplikasikan animasi pada sejumlah elemen secara bersamaan. Misalnya, animasi fade-in untuk semua item daftar.

document.querySelectorAll('.list-item').forEach((item, index) => {

    item.style.animation = `fadeInAnimation ease 0.5s forwards`;

    item.style.animationDelay = `${index * 0.2}s`;

});

Menyaring Elemen Dalam NodeList

Kadang kalian ingin menyaring elemen berdasarkan kriteria tertentu dari NodeList. Mengingat NodeList tidak memiliki method filter, kalian perlu mengonversinya ke array terlebih dahulu.

let filteredItems = Array.from(document.querySelectorAll('li')).filter(li => li.textContent.includes('JavaScript'));

Menggabungkan NodeList dengan Spread Operator

Dalam beberapa kasus, kalian mungkin ingin menggabungkan dua NodeList. Kalian bisa melakukannya dengan mudah menggunakan spread operator.

let divs = document.querySelectorAll('div');

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

let combinedNodes = [...divs, ...paragraphs];

Kesimpulan

NodeList merupakan konsep penting dalam pengembangan web dengan JavaScript, khususnya saat berinteraksi dengan DOM. Walaupun mirip dengan array, NodeList memiliki karakteristik unik. Artikel ini membahas aspek-aspek utama NodeList, seperti perbedaan antara NodeList live dan static, serta cara mengakses, mengelola dan mengiterasi elemen dalam NodeList.

NodeList bisa sangat berguna dalam situasi seperti manipulasi massal elemen DOM, pemilihan elemen berdasarkan kriteria tertentu, reaksi terhadap perubahan DOM dan optimasi performa saat mengiterasi elemen DOM. Selain itu, pentingnya mempertimbangkan kompatibilitas lintas browser saat menggunakan NodeList juga ditekankan.

Pada artikel ini juga dibahas contoh praktis penggunaan NodeList, seperti menerapkan style ke sejumlah elemen, membuat event listener untuk banyak elemen, mengoptimalkan proses read/write untuk performa, menggunakan NodeList dalam animasi, menyaring elemen dalam NodeList dan menggabungkan dua NodeList dengan spread operator.

Secara keseluruhan, NodeList adalah struktur data yang sangat berguna dan serbaguna yang dapat membantu pengembang menulis kode yang lebih efisien, efektif dan mudah dibaca dalam pengembangan web dengan JavaScript.

Temukan lebih banyak artikel seri belajar Javascript maupun bahasa pemrograman lainnya hanya di CODEKEY. Klik https://codekey.id/ sekarang juga untuk langsung belajar gratis. Sampai bertemu lagi!