Pada video ini, kita akan membahas secara khusus mengenai method-method yang bisa kita gunakan sebagai DOM Selector. DOM Selector berfungsi untuk memilih elemen mana yang hendak kita ubah. Pada video sebelumnya, kita telah melihat beberapa fungsi DOM seperti mengubah konten dan warna. Pada saat itu kita menggunakan DOM Selector dengan nama document.all. Namun itu hanya untuk keperluan contoh singkat saja ya, karena pada kenyataannya kita tidak pernah menggunakan selector document.all, karena cara penggunaannya terlalu sulit.

Di slide, kita bisa melihat ada 5 buah method yang sering digunakan sebagai DOM Selector. Yang paling sering digunakan adalah getElementById, dimana kita bisa memilih elemen berdasarkan nilai dari attribute id-nya. Kemudian ada method getElementsByTagName dan getElementsByClassName, yang sesuai dengan nama method-nya bisa kita gunakan untuk memilih elemen berdasarkan Tag Name dan Class Name. Yang perlu diperhatikan disini adalah pada method getElementById, pada bagian akhir dari tulisan element tidak terdapat huruf s. Artinya kita hanya memilih 1 buah elemen. Sedangkan pada method getElementsByTagName dan getElementsByClassName, pada akhir kata element terdapat huruf s yang mengartikan bahwa element adalah kata benda jamak. Jadi kedua method ini bisa digunakan untuk memilih banyak elemen sekaligus.

Pada Javascript versi yang lebih baru, terdapat method querySelector dimana kita bisa memilih elemen dengan menggunakan selector CSS. Method ini dengan cepat menjadi popular karena jauh lebih flexible dibandingkan dengan ketiga method sebelumnya. Method querySelector hanya bisa digunakan untuk memilih 1 buah elemen, sedangkan method querySelectorAll bekerja dengan cara yang sama namun bisa memilih banyak elemen sekaligus.

Di luar kelima method ini, masih ada beberapa DOM Selector lain, namun tidak kita bahas dalam video ini karena jarang digunakan.

Kita langsung coba praktek ya. Disini saya sudah menyiapkan file HTML sederhana, yang isinya masih sama dengan video sebelumnya. Namun pada bagian akhir, saya menambahkan tag img dan tag script. Sedangkan isi dari script-nya masih kosong. Kalau kita jalankan di browser, maka hasilnya seperti ini.

Kita buka bagian console dan kita coba DOM Selector melalui console terlebih dahulu. Kita akan mencoba method pertama yaitu getElementById. Method ini adalah DOM Selector dengan kinerja yang paling cepat dan akurat. Namun method ini memiliki satu kelemahan terbesar, yaitu kita harus melakukan perubahan pada halaman HTML untuk menambahkan attribute id. Jadi kita harus kembali ke source code HTML ya. Misalkan kita hendak memilih bagian tag “Judul Halaman”. Maka pada tag, kita harus tambahkan attribute id, sebagai contoh kita beri nilai “myid” saja ya.

Kita refresh browser. Kemudian kita coba pilih “Judul Halaman” ya. Kita bisa ketik kodenya seperti ini:

document.getElementById("myid");

Maka browser mengembalikan elemen “Judul Halaman”. Yang enaknya dari Chrome Developer Tools adalah kalau kita mengarahkan mouse ke atas elemen tersebut, maka browser akan memberikan highlight pada tampilan halamannya. Jadi kita bisa lebih mudah pada saat melakukan debugging.

Perhatikan bahwa Javascript adalah bahasa pemograman yang bersifat case sensitif. Artinya penggunaan huruf besar dan kecil harus sama persis. Perhatikan pada method getElementById harus menggunakan huruf E B dan I besar. Karena secara default Javascript menggunakan penamaan Camel Case, dimana kalau satu method terdiri dari banyak kata, maka kata pertama menggunakan huruf kecil, sedangkan kata berikutnya harus menggunakan huruf besar di setiap huruf pertama. Kalau misalkan kita ganti getElementByid menggunakan huruf i kecil, maka kita mendapatkan error bahwa method tidak berhasil ditemukan.

Begitu juga yang terjadi pada nilai attribute id. Perhatikan disini bahwa kita menuliskan myid dengan menggunakan huruf kecil semua. Pada penamaan id, tidak ada standart penggunaan camel case, lower case ataupun cara penulisan lainnya. Jadi disini kita menggunakan huruf kecil semua. Kalau misalkan pada saat memanggil getElementById, kita menyebutkan myId dengan menggunakan huruf I besar, apakah yang akan terjadi?

document.getElementById("myId");

Ternyata method getElementById tidak berhasil menemukan elemen “Judul Halaman”. Sebagai hasilnya, method mengembalikan nilai null.

Nilai yang dikembalikan oleh getElementById, bisa kita simpan sebagai variable ataupun konstanta. Sebagai contoh, kita buat konstanta dengan nama title untuk menyimpan elemen “Judul Halaman”. Maka kodenya menjadi:

const title = document.getElementById("myid");

Kalau kita lihat lagi isi dari title, maka kita mendapatkan kode HTML dari elemen si “Judul Halaman” tersebut. Namun aslinya, title ini bukan kode HTML ya. Title ini adalah sebuah Object. Untuk melihat apa saja isi object-nya, maka kita bisa menggunakan perintah:

console.dir(title);

Lalu kita bisa melihat apa saja isi method dan property yang dimiliki oleh object title. Kalau kita melihat ke bawah, disini ada property dengan nama innerText yang berisi “Judul Halaman”. Property ini yang mengatur text yang dikandung oleh elemen ini. Kita sudah belajar dari video sebelumnya, untuk mengubah teks maka kita bisa memberikan nilai baru kepada property innerText. Kita coba ganti teksnya menjadi “Skysen Solution”.

title.innerText = "Skysen Solution";

Dan sekarang tampilan dari halaman HTML kita pun sudah berubah. Judulnya berubah menjadi “Skysen Solution”. Sayangnya perubahan disini tidak permanen. Kalau kita melakukan refresh pada browser, maka judul kembali menjadi “Judul Halaman”. Kalau kita ingin script kita melakukan perubahan secara permanen, maka kita harus menuliskan kodenya di dalam file dom.js.

Kita buka kembali source code kita. Dan kali ini kita buka file dom.js. Pertama kita buat dahulu konstanta title untuk menyimpan elemen myid.

const title = document.getElementById("myid");

Dan untuk contoh manipulasinya, kita coba ubah warnanya menjadi merah. Kita sudah belajar di video sebelumnya ya. Kita gunakan property style.color dan kita isikan dengan nilai “red”.

title.style.color = "red";

Kita simpan dan jalankan di browser. Sekarang judul sudah berubah menjadi berwarna merah.

Ada beberapa hal yang perlu kita perhatikan disini. Berhubung kita sudah memasuki materi DOM, maka posisi dari tag script kita akan sangat berpengaruh. Kalau kita buka lagi halaman HTML, maka bisa dilihat disini kita menaruh tag script di bagian akhir. Tepatnya sebelum tag penutup body.

Kalau kita mengikuti standart HTML lama, maka semua css dan javascript seharusnya ditaruh di dalam tag head. Misalkan kita pindahkan ya, tag script menjadi tepat sebelum tag penutup head. Apakah yang akan terjadi? Kita coba refresh browser. Ternyata script kita menjadi tidak jalan. Kalau kita lihat di console, terdapat error dimana kita mencoba untuk membaca property style dari nilai null.

Mengapa hal ini bisa terjadi? Kita mesti tau terlebih dahulu cara kerja browser. Kalau kita lihat di address bar, maka kita bisa melihat bahwa kita meminta browser untuk membuka file index.html. Artinya kita mulai dari source code bagian HTML. Browser mulai bekerja dari atas ke bawah, dan di setiap barisnya browser mulai membaca dari kiri ke kanan.

Jadi kalau kita telusuri, browser akan bekerja mulai dari doctype, kemudian html, head, meta, title, dan masuk ke tag script. Pada saat ketemu tag script, maka browser akan berpindah ke source-nya, yaitu file dom.js. Dan pada baris pertamanya, browser berusaha untuk menjalankan getElementById(“myid”). Namun apa yang terjadi? Berhubung kita lihat kembali halaman HTML-nya, browser baru bekerja dari doctype hingga title, sehingga bagian Judul Halaman masih belum diproses, sehingga getElementById tidak berhasil menemukan elemen tersebut dan mengembalikan nilai null. Otomatis baris keduanya menjadi error.

Dari kasus seperti inilah kemudian muncul standar baru, dimana tag script ditaruh di bagian akhir halaman, atau tepatnya di sebelum tag penutup body. Alasan pertamanya adalah agar halaman HTML-nya diproses terlebih dahulu, dan semua elemen-elemen yang diperlukan sudah dimasukkan ke memory browser, sehingga DOM Selector akan berhasil menemukan elemen yang diinginkan. Alasan keduanya kurang lebih tetap sama ya, yaitu agar halaman HTML-nya diproses terlebih dahulu dan langsung ditampilkan di layar, setelah itu barulah browser mengunduh dan memproses Javascript. Jadinya di mata user, situs kita seolah-olah bisa langsung tampil, karena proses yang berat dilakukan di bagian belakang. Kita kembalikan dahulu tag script kita ke bagian sebelum tag penutup body. Kita refresh browser dan script kembali berjalan normal.

Kemudian perhatikan juga bahwa kita memilih elemen berdasarkan attribute id yang bernilai “myid”. Jadi apabila attribute ini kita pindahkan ke elemen lain, misalkan kita pindahkan ke Daftar Pertama. Maka yang berubah warna adalah “Daftar Pertama”.

Apa yang terjadi apabila ada 2 buah elemen yang memiliki id dengan nilai “myid”? Kita coba ya. Kita tambahkan kembali attribute id pada Judul Halaman. Sekarang kita memiliki 2 elemen yang memiliki id sama, yaitu Judul Halaman dan Daftar Pertama. Kita coba refresh browser. Dan ternyata yang berubah warna adalah Judul Halaman. Perlu diingat bahwa attribute id hanya boleh menggunakan nilai yang sama untuk salah satu tag saja ya. Jadi apabila ada 2 tag yang menggunakan id yang sama, maka yang diakui adalah tag yang pertama kali ditemukan oleh browser, atau pada source code berada di bagian atas.

Sekarang kita hapus dahulu id pada “Daftar Pertama”. Lalu kita ubah source code Javascript kita menjadi komentar. Kita tambahkan dahulu komentar “Contoh 1: getElementById”. Kita akan mempelajari method kedua, yaitu getElementsByTagName. Method ini memilih elemen berdasarkan tag name atau nama tag-nya. Kalau kita lihat kembali ke source code HTML, yang dimaksud dengan nama tag adalah kata pertama di setiap tag. Disini kita bisa melihat contohnya ada tag body, h1, ol, li, img dan script. Pertama kita coba dahulu untuk mengambil tag yang jumlahnya banyak ya, yaitu tag li yang jumlahnya ada 3. Kita coba ketik kodenya di console:

document.getElementsByTagName("li");

Kita mendapatkan hasil yang berupa HTMLCollection, yang isinya adalah 3 buah li. Kalau kita buka, kita bisa melihat di kirinya ada nomor index, dan dikanan ada elemennya yaitu li. Kalau kita arahkan mouse kita ke atas li, maka kita bisa melihat browser memberikan highlight terhadap li yang sedang kita tunjuk. Disini kita juga melihat ada property length yang bernilai 3.

Kita bisa membuat konstanta misalkan dengan nama list untuk menyimpan hasil dari getElementsByTagName.

const list = document.getElementsByTagName("li");

Namun cara penggunaan list ini sedikit berbeda dari sebelumnya. Kalau sebelumnya kita bisa mengubah isi text dengan menuliskan:

list.innerText = "Skysen Solution";

Namun disini hasilnya tidak ada yang berubah ya. Hal ini disebabkan karena kita mengubah property innerText dari HTMLCollection, bukan mengubah elemennya. Kalau kita hendak menunjuk elemen, maka kita harus menambahkan index setelah list. Misalkan kita hendak mengubah “Daftar Ketiga”, yang nomor indexnya adalah 2, maka kodenya menjadi:

list[2].innerText = "Skysen Solution";

Dan sekarang teks “Daftar Ketiga” berubah menjadi “Skysen Solution”. Jadi cara menggunakan HTMLCollection mirip dengan cara menggunakan array. Kita mesti menambahkan kurung siku dan nomor index-nya untuk mengakses elemen. HTMLCollection juga memiliki property length yang menunjukkan jumlah elemen yang disimpan di dalamnya. Namun perlu diingat disini bahwa HTMLCollection tidak memiliki array method. Jadi kita bisa menggunakan method seperti forEach, filter, map, dan lain-lain.

Kita coba mengambil elemen lainnya ya. Misalkan kita ambil elemen h1.

document.getElementsByTagName("h1");

Kita mendapatkan HTMLCollection yang isinya hanya 1 elemen. Ingat bahwa walaupun isinya hanya 1, ketika kita hendak mengakses elemen tersebut, kita tetap harus menggunakan kurung siku dan nomor index-nya.

Bagaimana kalau kita mengambil elemen yang sama sekali tidak ada di dalam halaman? Kita coba ambil elemen h2.

document.getElementsByTagName("h2");

Kita tetap mendapatkan hasil HTMLCollection. Hanya saja HTMLCollection ini isinya 0. Bisa kita lihat dari nilai property length.

Kita kembali ke source code dan kita ulangi kode kita di console tadi. Namun sebelumnya kita tambahkan komentar dahulu ya, “Contoh 2: getElementsByTagName”.

const list = document.getElementsByTagName("li");

Selanjutnya kita ingin mengubah warna list menjadi merah. Kita bisa mengetikkan kodenya seperti ini ya:

list[0].style.color = "red";

Kita simpan dan refresh browser. Dan sekarang warna dari Daftar Pertama berubah menjadi merah. Kalau kita ingin mengubah daftar kedua dan daftar ketiga menjadi merah, maka kita bisa copy paste kodenya untuk menambahkan list[1] dan list[2]. Sekarang ketiga daftar menjadi berwarna merah.

Namun cara seperti ini tidak disarankan ya. Alasan utamanya karena terjadi penggandaan kode untuk mengubah warna. Dan alasan keduanya adalah karena kode kita hanya bisa berjalan kalau jumlah daftarnya adalah 3, kode akan error apabila jumlahnya berubah. Maka cara yang lebih disarankan adalah dengan menggunakan looping for. Kita komentari dahulu kode yang berganda ini.

Lalu kita tambahkan kode yang menggunakan loop. Pertama kita buat looping dimulai dari 0, hingga lebih kecil dari list.length. Kita lakukan increment pada i. Di dalam loop, pertama kita tambahkan dahulu konstanta element yang diambil dari list dengan index ke i. Kemudian kita ubah property style.color dari elemen menjadi “red”.

for(let i = 0; i < list.length; i++)
{
  const element = list[i];
  element.style.color = "red";
}

Kita simpan dan refresh browser. Sekarang ketiga daftar telah berhasil berubah menjadi merah. Bagi teman-teman yang masih bingung mengenai looping for, bisa review kembali materi perulangan pada playlist Belajar Javascript Dasar.

Kita lihat kembali source code-nya ya. Nah, berhubung HTMLCollection ini bersifat Iterable, maka kita bisa mempersingkat 2 baris kode kita, yang bagian for dan const elemen ini, menjadi satu baris looping dengan menggunakan sintaks for of. Pertama kita komentari dahulu kode looping for. Lalu kita tambahkan kode baru. Looping for, di dalamnya kita buat const element of list. Di dalam loop, sama seperti di atas, kita menggunakan property style.color dari element dan mengubahnya menjadi, agar sedikit berbeda, kali ini menjadi “blue” ya.

for(const element of list)
{
  element.style.color = "blue";
}

Kita simpan dan jalankan di browser. Dan sekarang warna ketiga daftar berubah menjadi biru. Kita lihat kembali source code. Looping yang di atas yang menggunakan for i, adalah sama dengan looping bawah yang menggunakan for of. Looping for of lebih sederhana, namun hanya bisa dilakukan pada object yang bersifat Iterable.

Sekarang kita lanjutkan ke materi berikutnya. Bagaimana kalau ternyata di halaman HTML kita terdapat 2 buah list? Sebagai contoh, kita buka kembali kode HTML kita. Kita tambahkan satu list lagi ya. Misalkan daftar buah-buahan. Kita copy dari tag pembuka ol hingga tag penutup ol. Lalu kita paste ke bawahnya.

Isinya kita ubah ya. Misalkan kita memiliki 4 macam buah. Apel, Mangga, Pisang dan Jambu. Kita simpan dan refresh browser. Dan ternyata semua daftar berubah menjadi warna biru. Mengapa? Karena kita mengambil semua elemen li. Kita tidak peduli apakah li tersebut berada di ol yang atas, atau ol yang bawah.

Sekarang kita masuk ke contoh kasus berikutnya. Bagaimana kalau kita ingin mengubah warna di daftar buah saja? Sementara daftar yang berada di atas, tidak berubah warna. Apakah kita bisa melakukan seleksi seperti ini?

Jawabannya adalah bisa. Namun untuk membantu, kita perlu menambahkan id pada setiap ol. Untuk ol yang pertama, kita tambahkan id=”numbers”. Karena isinya adalah angka pertama, kedua dan ketiga. Sedangkan untuk ol yang kedua, kita tambahkan id=”fruits”. Karena isinya adalah nama buah. Kita simpan dan refresh browser.

Kita coba dahulu di console ya. Kalau kita menjalankan kode document.getElementsByTagName(“li”). Maka kita mendapatkan hasil 7 buah li. Browser mengambil semua elemen li, tidak peduli li berada di ol yang mana.

Untuk mengakalinya, pertama kita mesti mengambil ol yang mengandung semua nama buah terlebih dahulu, yaitu ol dengan id=”fruits”. Kita bisa mengambil elemen ol ini dengan menggunakan method getElementById, dan kita simpan nilainya ke konstanta fruits. Maka perintahnya menjadi:

const fruits = document.getElementById("fruits");

Kita lihat kembali isi elemen fruits, kita mendapatkan ol, yang isinya ada 4 buah li nama buah. Selanjutnya kita bisa memanggil method getElementsByTagName, namun kita bukan menggunakan object document, melainkan menggunakan object fruits. Maka kita mendapatkan 4 buah li, hanya yang berupa nama buah saja.

Kita pindahkan kode kita ke source code. Jadi sebelum kita membuat konstanta list, kita buat dahulu konstanta fruits yang isinya diambil dari document.getElementById(“fruits”);. Dan kemudian kita ubah baris berikutnya, method getElementsByTagName dipanggil dari object fruits. Kita simpan dan jalankan di browser. Dan sekarang yang berubah menjadi warna biru hanyalah daftar buah saja.

const fruits = document.getElementById("fruits");
const list = fruits.getElementsByTagName("li");

Kita masuk ke method yang ketiga, yaitu method getElementsByClassName. Method ini memilih elemen yang memiliki attribute nama kelas tertentu. Kita bisa dengan mudah menambahkan suatu elemen ke dalam seleksi, asalkan kita diperbolehkan untuk mengubah kode HTML dan menambahkan attribute class ke dalam tag.

Sebagai contoh, kita ingin mengubah warna daftar, namun hanya daftar tertentu saja. Sama seperti contoh kasus yang barusan. Kalau kita ingin menggunakan method getElementsByClassName, maka pertama kita mesti menambahkan dahulu attribute class pada tag yang hendak kita ubah. Kita misalkan nama kelasnya adalah “list-item”.

Kita ke kode Javascript. Pertama ubah dahulu kode sebelumnya menjadi komentar. Kemudian kita tambahkan komentar “Contoh 3: getElementsByClassName”. Lalu kita ke kode HTML. Kita tambahkan attribute class=”list-item” ke semua tag li nama buah. Kita simpan dan refresh browser. Kita coba di console dahulu ya.

document.getElementsByClassName("list-item");

Dan kita pun mendapatkan hasil HTMLCollection yang isinya keempat li nama buah.

Kita coba tuliskan kembali di source code javascript kita ya. Pertama kita buat dahulu konstanta list yang nilainya adalah document.getElementsByClassName(“list-item”);. Kemudian kita looping for of, dengan konstanta elemen yang diambil dari list. Di dalam loop, kita ubah warnanya menjadi green. Kita simpan dan jalankan di browser. Dan sekarang semua nama buah berubah menjadi hijau.

const list = document.getElementsByClassName("list-item");
for(const element of list)
{
  element.style.color = "green";
}

Cara memilih getElementsByClassName lebih mudah dan lebih flexible apabila dibandingkan dengan getElementsByTagName. Dengan catatan kita boleh mengubah kode HTML dan boleh mengubah kelas dari elemen-elemen yang bersangkutan. Untuk menambahkan ke dalam pilihan, kita tinggal menambahkan kelasnya. Dan untuk mengeluarkan dari pilihan, kita tinggal menghapus kelasnya.

Sebagai contoh, kita ingin agar judul turut berubah menjadi berwarna hijau. Kita tinggal ke kode HTML, kemudian kita tambahkan class=”list-item” pada tag h1.

Kemudian kalau misalkan kita ingin agar nama buah yang berwarna hijau hanya yang nomor ganjil saja. Sedangkan nama buah dengan nomor genap dikeluarkan dari seleksi. Kita tinggal ke kode HTML, kemudian kita hapus attribute class dari nama buah yang bernomor genap. Kita hapus juga kelas dari tag h1.

Oke ya. Semoga teman-teman sudah mengerti mengenai 3 method pertama untuk memilih elemen DOM. Apabila teman-teman masih bingung, bisa coba ulangi lagi video ini. Dan kalau masih ada pertanyaan, boleh tinggalkan pesan di kolom komentar.

Sekarang kita lanjutkan ke 2 method terakhir dari DOM Selector kita, yaitu querySelector dan querySelectorAll. Kedua method ini sama-sama menggunakan selector CSS untuk memilih elemen. Yang membedakannya adalah querySelector hanya bisa memilih satu elemen saja, sedangkan querySelectorAll bisa memilih banyak elemen. Nah, bagi teman-teman yang sudah mengikuti video kursus lengkap Front End Developer ini dari awal, tentunya masih ingat ya selector CSS. Kita sudah menonton beberapa video yang secara khusus membahas mengenai hal ini. Dengan menggunakan selector CSS yang tepat, kita bisa memilih kembali elemen-elemen sesuai dengan 3 method yang sudah kita pelajari barusan.

Jadi kita akan membahas kembali contoh kasus kita dari yang pertama. Tadi kita menggunakan getElementById untuk mengubah warna judul menjadi merah. Dalam kasus ini, kita telah menambahkan attribute id=”myid” pada judul. Kita coba di browser terlebih dahulu ya. Kita panggil document.querySelector. Sebagai argument-nya adalah selector css untuk memilih id, kalau teman-teman masih ingat, kita menggunakan simbol # diikuti oleh nama idnya. Dan kita pun mendapatkan hasil elemen h1 “Judul Halaman”.

Kita kembali ke source code javascript. Kita komentari dahulu kode sebelumnya. Kita tambahkan kode baru. Kita tambahkan komentar dahulu ya. Contoh 1: getElementById. Kita buat konstanta title yang isinya diambil dari document.querySelector(“#myid”). Kemudian kita ubah warnanya menjadi merah.

// Contoh 1: getElementById
const title = document.querySelector("#myid");
title.style.color = "red";

Kita simpan dan jalankan di browser. Dan sekarang warna judul berubah menjadi merah.

Kita lanjutkan ke contoh kasus kedua yang tadi kita bahas menggunakan getElementsByTagName. Kita hendak memilih semua nama buah dan mengubah warnanya menjadi biru. Pertama kita ubah dahulu source code kita menjadi komentar ya. Kemudian kita tambahkan komentar baru yaitu “Contoh 2: getElementsByTagName”.

Kita simpan dan kita refresh browser. Pertama kita coba di browser dulu ya. Bagi teman-teman yang masih ingat selector pada CSS, bagaimana cara mengambil semua elemen li? Kita coba panggil ya, document.querySelector. Dan argumentnya kita cukup menuliskan li saja. Browser mengembalikan element li, namun berhubung querySelector hanya bisa mengembalikan 1 elemen saja, maka kita mendapatkan li yang berada di paling atas. Alias yang pertama kali ditemukan.

Kalau kita ingin memilih semua elemen li, maka kita mesti menggunakan method querySelectorAll. Kita coba ya.

document.querySelectorAll(“li”);

Maka kita mendapatkan hasil ketujuh buah li. Artinya kita mendapatkan semua li ya. Berhubung kita hanya ingin mengambil li daftar buah saja, yang kalau kita lihat di source code HTML-nya berada di dalam id fruits, maka kita bisa menggunakan descendant selector li yang berada di dalam id fruits. Maka kodenya menjadi:

document.querySelectorAll("#fruits li");

Dan sekarang kita mendapatkan 4 buah li, hanya yang nama buah saja. Perhatikan disini bahwa hasil yang kita dapatkan adalah berupa NodeList, bukan HTMLCollection seperti hasil dari getElementsByTagName. Apa bedanya NodeList dengan HTMLCollection? Nah, kalau HTMLCollection, kita mendapatkan hasil hanya berupa element saja. Sedangkan pada NodeList, kita mendapatkan hasil berupa node, node ini bisa berupa element, attribute, dan text. Kebetulan pada contoh ini hasil NodeList kita berupa elemen saja ya, nanti akan kita bahas lebih lanjut lagi mengenai perbedaan ini.

Perbedaan berikutnya adalah NodeList memiliki beberapa method tambahan yang tidak dimiliki oleh HTMLCollection. Kalau kita buka lagi prototypenya, disini kita menemukan method tambahan seperti entries dan forEach. Method forEach ini bisa membantu kita untuk melakukan iterasi isi dari NodeList.

Sekarang kita menuju source code Javascript. Kita tuliskan kode untuk merubah nama buah menjadi berwarna biru. Pertama kita buat konstanta fruits, lalu kita seleksi nama buah menggunakan method querySelectorAll. Argumentnya #fruits spasi li. Kemudian kita panggil method forEach. Argumentnya berupa function ya, dengan satu parameter yaitu element. Kemudian apa isi dari function tersebut? Kita ubah property style.color-nya menjadi “blue”.

Kita simpan dan refresh browser. Sekarang semua nama buah sudah berubah menjadi berwarna biru ya. Berarti kita telah berhasil memecahkan contoh kasus kedua dengan menggunakan querySelectorAll. Kita ubah kembali kodenya menjadi komentar. Sekarang kita masuk ke contoh kasus terakhir yang telah kita selesaikan menggunakan getElementsByClassName. Kita tambahkan komentar “Contoh 3: getElementsByClassName”.

Kita coba di console dulu ya. Kalau kita ingin mengambil semua elemen yang mengandung class tertentu, argument-nya gampang saja ya. Kita tinggal tambahkan titik diikuti oleh nama kelasnya.

document.querySelectorAll(".list-item");

Dan kita pun mendapatkan hasil 2 li, yaitu nama buah dengan nomor urut ganjil. Jadi kita tinggal terapkan di source code kita ya. Kita copy paste saja dari kode sebelumnya. Argument querySelectorAll kita ubah menjadi “.list-item”. Sedangkan warnanya kita ubah menjadi “green”. Kita simpan dan refresh browser. Dan sekarang kita sudah berhasil memecahkan contoh kasus ketiga menggunakan querySelectorAll.

Oke ya, kita sudah melihat bagaimana flesibilitas dari querySelector, sehingga method ini bisa memecahkan semua masalah yang awalnya kita pecahkan menggunakan getElement. Sekarang kita akan melihat lagi cara memecahkan masalah ketiga, tanpa menggunakan attribute id maupun class. Jadi kita tetap bisa melakukan seleksi walaupun tidak diperbolehkan untuk merubah kode HTML.

Kita ubah dahulu kode kita menjadi komentar. Lalu kita coba dahulu di console. Bagaimana cara memilih li daftar buah yang hanya nomor ganjil saja menggunakan selector css? Pertama kita coba dahulu ya querySelectorAll, kita pilih li yang berada di dalam ol. Kodenya adalah ol spasi li. Kita jalankan dan kita mendapatkan 7 buah li. Karena semua li berada di dalam ol.

document.querySelectorAll("ol li");

Selanjutnya kita lihat lagi bahwa daftar buah berada di dalam ol nomor 2. Berarti kita harus melakukan seleksi hanya ol nomor 2 saja. Disini kita bisa menggunakan pseudoclass nth-of-type(2). Dan sekarang kita mendapatkan 4 buah li nama buah.

document.querySelectorAll("ol:nth-of-type(2) li");

Selanjutnya kita pilih lagi, hanya nama buah yang bernomor ganjil saja. Kita gunakan lagi pseudoclass nth-of-type dengan argument odd atau ganjil. Dan sekarang kita mendapatkan nama buah namun hanya yang dengan nomor urut ganjilnya saja ya.

document.querySelectorAll("ol:nth-of-type(2) li:nth-of-type(odd)");

Sekarang kita kembali ke source code Javascript. Dan kita tambahkan querySelector baru dengan argument seperti console tadi. Jadi disini ada 2 buah solusi untuk kasus ketiga ya. Yang pertama adalah dengan menggunakan selector class, cara ini bisa kita gunakan apabila di dalam kode HTML sudah terdapat class atau kita diperbolehkan untuk mengubah kode HTML-nya untuk menambahkan class. Sedangkan cara kedua adalah dengan menggunakan pseudoclass, kita tetap bisa memilih elemen tanpa perlu mengubah HTML. Kalau kita simpan dan jalankan di browser, hasil kedua selector adalah sama.

Jadi kita sudah melihat betapa flexiblenya querySelector, sehingga kita tetap bisa memilih elemen tanpa perlu mengubah kode HTML. Dengan catatan kode HTML-nya benar-benar tidak pernah diubah lagi ya. Karena kalau ada penambahan pada kode HTML, ada kecenderungan nomor urut elemennya turut berubah, kemungkinan bisa menyebabkan kode kita menjadi error. Method querySelector ini dengan cepat menjadi popular karena flesibilitas dalam penggunaannya. Hanya saja method ini tetap memiliki kelemahan ya. Dengan menggunakan querySelector, artinya kita mesti menuliskan kode CSS di dalam kode Javascript. Hal ini kurang sesuai dengan konsep pemisahan antara HTML, CSS dan Javascript.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.