Belajar berbagai metode JavaScript untuk memilih atau menyeleksi elemen HTML dari DOM, seperti berdasarkan ID, class, nama tag, atau bahkan selector CSS.
16m bacaanKuis WajibMicro Badge Lesson
Jadi "Detektif" Elemen: Cara JavaScript Nangkep Elemen HTML dari DOM!
Udah ngerti kan kalau DOM itu kayak "peta" struktur halaman HTML-mu di browser? Nah, biar JavaScript bisa ngapa-ngapain elemen di halaman itu (misalnya, ganti teksnya, ubah warnanya, atau nambahin sesuatu), langkah pertama yang harus dilakuin JavaScript adalah nemuin dan "nangkep" elemen yang mau dioprek itu dulu.
Bayangin kamu mau ngasih perintah ke salah satu mainanmu di kamar yang penuh mainan. Kamu harus nunjuk dulu kan mainan yang mana? Sama, JavaScript juga gitu. Dia butuh cara buat ngidentifikasi elemen HTML spesifik dari sekian banyak elemen di DOM.
Untungnya, objek document (pintu masuk kita ke DOM) nyediain banyak banget "alat bantu" atau metode buat milih elemen. Yuk, kita kenalan sama beberapa yang paling sering dipake!
1. document.getElementById('idElemen') - Nangkep Berdasarkan KTP Unik!
Ini cara yang paling klasik dan cepet buat milih satu elemen spesifik kalau elemen itu punya atribut id yang unik.
Cara Kerja: Kamu kasih ID elemen yang kamu mau sebagai argumen (dalam bentuk string). Metode ini bakal nyari di seluruh dokumen, dan kalau ketemu, dia bakal yang punya ID itu. Kalau gak ketemu, dia ngembaliin .
ngembaliin objek elemen HTML
null
Ingat: Atribut id di HTML itu harus unik per halaman! Jadi, getElementById ini dijamin cuma bakal ngembaliin satu elemen (atau null).
Contoh HTML:
html
<h1 id="judul-utama">Selamat Datang!</h1><p id="paragraf-satu">Ini adalah paragraf pertama.</p><div id="kotak-info">Info penting ada di sini.</div>
Contoh JavaScript:
javascript
// Milih elemen h1 dengan ID "judul-utama"let elemenJudul = document.getElementById('judul-utama');console.log(elemenJudul); // Output: <h1 id="judul-utama">Selamat Datang!</h1> (objek elemennya)if (elemenJudul) { // Praktik baik buat ngecek apakah elemennya ketemu elemenJudul.style.color = 'blue'; // Langsung bisa dioprek!}// Milih elemen p dengan ID "paragraf-satu"let elemenParagraf = document.getElementById('paragraf-satu');if (elemenParagraf) { console.log(elemenParagraf.textContent); // Output: Ini adalah paragraf pertama.}// Milih elemen yang ID-nya gak adalet elemenGakAda = document.getElementById('id-yang-salah');console.log(elemenGakAda); // Output: null
getElementById ini cepet dan efisien kalau kamu udah tau ID elemen targetmu.
2. document.getElementsByClassName('namaKelas') - Nangkep Sekelompok Elemen Berdasarkan Kelas
Kalau kamu mau milih semua elemen yang punya nama kelas (class) tertentu, metode ini jagoannya.
Cara Kerja: Kamu kasih nama kelas sebagai argumen (string). Metode ini bakal ngembaliin HTMLCollection (mirip array, tapi bukan array beneran) yang isinya semua elemen yang punya kelas itu. Kalau gak ada elemen yang cocok, dia ngembaliin HTMLCollection kosong.
Karena hasilnya HTMLCollection, kamu biasanya perlu ngelooping (pake for loop atau konversi ke array dulu) buat ngakses tiap elemennya satu-satu.
Ingat, satu elemen bisa punya banyak kelas, dan satu kelas bisa dipake di banyak elemen.
Contoh HTML:
html
<p class="catatan penting">Catatan pertama yang penting.</p><div>Ini div biasa.</div><p class="catatan">Catatan kedua.</p><span class="catatan sorot">Catatan di span.</span>
Contoh JavaScript:
javascript
// Milih semua elemen yang punya class "catatan"let semuaCatatan = document.getElementsByClassName('catatan');console.log(semuaCatatan); // Output: HTMLCollection yang isinya 3 elemen (p, p, span)console.log(semuaCatatan.length); // Output: 3// Ngasih style ke semua elemen yang punya class "catatan"for (let i = 0; i < semuaCatatan.length; i++) { semuaCatatan[i].style.backgroundColor = 'lightyellow';}// Milih elemen yang punya kelas "penting" (cuma satu di contoh ini)let elemenPenting = document.getElementsByClassName('penting');if (elemenPenting.length > 0) { elemenPenting[0].style.fontWeight = 'bold'; // Akses elemen pertama dari collection}
HTMLCollection itu live collection, artinya kalau kamu nambahin atau ngapus elemen dengan kelas itu dari DOM pake JavaScript, collection-nya bakal otomatis ke-update.
3. document.getElementsByTagName('namaTag') - Nangkep Semua Elemen dengan Tag Tertentu
Metode ini dipake buat milih semua elemen yang punya nama tag HTML tertentu.
Cara Kerja: Kamu kasih nama tag (misal, 'p', 'li', 'img') sebagai argumen (string). Dia bakal ngembaliin HTMLCollection yang isinya semua elemen dengan tag itu.
Sama kayak getElementsByClassName, kamu perlu ngelooping buat ngakses tiap elemennya.
Contoh HTML:
html
<ul> <li>Item daftar 1</li> <li>Item daftar 2</li></ul><p>Paragraf satu.</p><p>Paragraf dua.</p>
Contoh JavaScript:
javascript
// Milih semua elemen <li>let semuaItemDaftar = document.getElementsByTagName('li');console.log("Jumlah item daftar:", semuaItemDaftar.length); // Output: Jumlah item daftar: 2for (let item of semuaItemDaftar) { // Cara looping lain (for...of) item.style.color = 'green';}// Milih semua elemen <p>let semuaParagraf = document.getElementsByTagName('p');console.log("Jumlah paragraf:", semuaParagraf.length); // Output: Jumlah paragraf: 2
4. document.querySelector('selectorCSS') - Nangkep Elemen PERTAMA Pake Jurus CSS!
Nah, ini metode yang super fleksibel dan modern! querySelector ngebolehin kamu milih elemen pake selector CSS apa pun yang kamu udah pelajari (type, class, ID, atribut, kombinasi, pseudo-class, dll.).
Cara Kerja: Kamu kasih string selector CSS sebagai argumen. Metode ini bakal nyari elemen pertama yang cocok sama selector itu di dokumen. Kalau ketemu, dia ngembaliin objek elemen HTML itu. Kalau gak ketemu, dia ngembaliin null.
Cuma ngembaliin elemen pertama yang cocok, meskipun ada banyak elemen lain yang juga cocok sama selector itu.
Contoh HTML:
html
<div id="konten"> <h2 class="judul-seksi utama">Judul Utama Seksi</h2> <p class="teks-biasa">Paragraf pertama.</p> <p class="teks-biasa sorot">Paragraf kedua yang disorot.</p> <a href="https://example.com" target="_blank">Link Eksternal</a></div>
Contoh JavaScript:
javascript
// Milih elemen pertama dengan class "teks-biasa"let paragrafPertama = document.querySelector('.teks-biasa');if (paragrafPertama) { paragrafPertama.style.fontStyle = 'italic'; // Cuma paragraf pertama yang jadi miring}// Milih elemen dengan ID "konten"let divKonten = document.querySelector('#konten');if (divKonten) { divKonten.style.border = '1px solid black';}// Milih link <a> pertama yang punya atribut target="_blank"let linkEksternal = document.querySelector('a[target="_blank"]');if (linkEksternal) { linkEksternal.style.color = 'red';}// Milih elemen h2 yang punya class "judul-seksi" DAN "utama"let judulSeksiUtama = document.querySelector('h2.judul-seksi.utama');if (judulSeksiUtama) { console.log(judulSeksiUtama.textContent);}
querySelector ini jadi favorit banyak developer karena fleksibilitasnya yang bisa pake selector CSS apa aja.
5. document.querySelectorAll('selectorCSS') - Nangkep SEMUA Elemen Pake Jurus CSS!
Mirip sama querySelector, tapi querySelectorAll bakal ngembaliin SEMUA elemen yang cocok sama selector CSS yang kamu kasih.
Cara Kerja: Hasilnya adalah NodeList (mirip array, dan bisa dilooping pake forEach langsung, beda sama HTMLCollection yang kadang perlu di-convert dulu). Kalau gak ada elemen yang cocok, dia ngembaliin NodeList kosong.
NodeList yang dikembaliin querySelectorAll itu static, bukan live. Artinya, kalau kamu nambahin elemen baru ke DOM yang cocok sama selector itu setelah querySelectorAll dipanggil, NodeList yang lama gak bakal otomatis ke-update. Kamu perlu manggil querySelectorAll lagi.
Contoh JavaScript:
javascript
// (Pake HTML dari contoh querySelector di atas)// Milih SEMUA elemen dengan class "teks-biasa"let semuaParagrafBiasa = document.querySelectorAll('.teks-biasa');console.log("Jumlah paragraf biasa:", semuaParagrafBiasa.length); // Output: 2semuaParagrafBiasa.forEach(function(paragraf) { paragraf.style.borderBottom = '1px dotted gray';});// Milih semua link di dalem div dengan ID "konten"let semuaLinkDiKonten = document.querySelectorAll('#konten a');semuaLinkDiKonten.forEach(link => { // Pake arrow function console.log("URL Link:", link.href);});
Kapan Pake Mana?
Butuh satu elemen unik dan udah tau ID-nya? getElementById() paling cepet.
Butuh satu elemen pertama yang cocok sama selector CSS kompleks? querySelector().
Butuh semua elemen dengan class tertentu? getElementsByClassName() (hasilnya live HTMLCollection) atau querySelectorAll('.namaKelas') (hasilnya static NodeList, bisa forEach). querySelectorAll sering lebih disukai karena bisa pake selector CSS apa aja dan hasilnya bisa langsung forEach.
Butuh semua elemen dengan tag tertentu? getElementsByTagName() atau querySelectorAll('namaTag').
Secara umum, querySelector() dan querySelectorAll() itu jadi pilihan yang sangat fleksibel dan modern karena mereka "ngomong" pake bahasa selector CSS yang udah kita kenal.
Setelah Elemen "Ditangkap"
Begitu kamu udah berhasil "nangkep" satu atau beberapa elemen dan nyimpennya di variabel JavaScript, kamu bisa mulai ngelakuin macem-macem hal ke elemen itu:
Ngambil atau ngubah teks di dalemnya (textContent, innerHTML).
Ngambil atau ngubah atributnya (getAttribute, setAttribute).
Ngubah style CSS-nya (element.style.propertiCss).
Nambahin atau ngapus class CSS-nya (element.classList).
Nambahin event listener biar bisa ngerespon aksi pengguna.
Ini semua bakal kita bahas di materi-materi berikutnya!
Sekarang kamu udah punya "kail" dan "jaring" buat "nangkep ikan" (elemen HTML) dari "kolam" DOM! Ngertiin cara milih elemen yang tepat itu langkah awal yang super penting buat bisa bikin halaman web yang interaktif.
Coba deh praktikkan semua metode selector ini di halaman HTML sederhana buatanmu sendiri. Liat apa yang dikembaliin sama tiap metode di console.log(). Makin sering nyoba, makin paham!
Checkpoint KuisTarget: 70%
Kuis Memilih Elemen DOM di JavaScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
