JavaScript Academy · Pelajaran

getElementById dan getElementsByClassName

Gunakan metode pemilihan klasik.

getElementById dan getElementsByClassName adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

getElementById

getElementById mengembalikan satu elemen dengan id yang cocok, atau null. Identitas harus unik pada sebuah halaman, sehingga metode ini mengembalikan satu elemen.

const header = document.getElementById("header");
console.log(header.tagName);

Tanpa Simbol Tanda Pagar

Berbeda dari pemilih CSS, Anda memberikan identitas mentah tanpa #. Memberikan "#header" tidak akan menghasilkan kecocokan.

document.getElementById("menu");   // correct
document.getElementById("#menu");  // wrong, returns null

getElementsByClassName

getElementsByClassName mengembalikan HTMLCollection dinamis yang berisi semua elemen dengan kelas yang diberikan.

const cards = document.getElementsByClassName("card");
console.log(cards.length);

Koleksi HTML Bersifat Dinamis

Koleksi tersebut diperbarui secara otomatis saat DOM berubah. Jika Anda menambahkan .card baru nanti, cards.length bertambah tanpa perlu melakukan pencarian ulang.

const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automatically

Mengindeks Koleksi

Akses item berdasarkan indeks. HTMLCollection mirip larik, tetapi bukan larik sungguhan.

const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);

Tidak Ada forEach Secara Langsung

Karena mirip larik (bukan larik), HTMLCollection tidak memiliki forEach. Konversikan terlebih dahulu atau gunakan perulangan biasa.

const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
  console.log(cards[i].textContent);
}

getElementsByTagName

getElementsByTagName mengembalikan HTMLCollection dinamis yang berisi setiap elemen dengan tag tertentu, seperti semua paragraf.

const paras = document.getElementsByTagName("p");
console.log(paras.length);

Beberapa Kelas

Anda dapat memberikan beberapa nama kelas yang dipisahkan oleh spasi. Elemen harus memiliki semua kelas yang tercantum agar disertakan.

const items = document.getElementsByClassName("btn primary");

Dibatasi pada Elemen

Metode-metode ini juga tersedia pada elemen, sehingga pencarian dibatasi pada turunan elemen tersebut.

const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");

Mengonversi Menjadi Larik

Untuk menggunakan metode larik seperti map atau filter, uraikan koleksi ke dalam larik sungguhan.

const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);

Kapan Menggunakan Masing-Masing

Gunakan getElementById untuk pencarian unik yang cepat. Utamakan querySelectorAll saat Anda menginginkan gambaran statis atau pemilih yang rumit; gunakan keluarga getElementsBy* jika Anda memang memerlukan koleksi dinamis.

Pemeriksaan Singkat

Pilih perilaku yang tepat.

Rangkuman

Anda telah mempelajari getElementById (satu elemen berdasarkan identitas mentah, tanpa #), getElementsByClassName dan getElementsByTagName (koleksi HTML dinamis). Koleksi dinamis perlu dikonversi menggunakan Array.from agar metode larik dapat digunakan, dan tidak memiliki forEach sendiri.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “getElementById dan getElementsByClassName” gratis?

Ya — teks lengkap “getElementById dan getElementsByClassName” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “getElementById dan getElementsByClassName”?

Gunakan metode pemilihan klasik. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “getElementById dan getElementsByClassName” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Memilih Elemen dengan querySelector
getElementById dan getElementsByClassName
Menelusuri Induk, Anak, dan Saudara
NodeList vs HTMLCollection

← Kembali ke JavaScript Academy