Menelusuri Induk, Anak, dan Saudara
Navigasikan pohon DOM di antara simpul yang saling terkait.
Menelusuri Induk, Anak, dan Saudara adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Mengapa Melakukan Penelusuran
Setelah memiliki satu elemen, Anda sering kali memerlukan elemen terkait: container di sekitarnya, elemen-elemen di dalamnya, atau elemen tepat di sebelahnya. Properti penelusuran DOM memungkinkan Anda berpindah-pindah di dalam pohon.
parentElement
parentElement memberi Anda elemen yang memuat elemen saat ini, atau null jika berada di bagian paling atas pohon.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);Elemen Anak
children adalah HTMLCollection dinamis yang berisi elemen anak langsung dari suatu elemen (simpul teks tidak disertakan).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild dan lastElementChild
Keduanya langsung menuju elemen anak pertama atau terakhir, dengan melewati simpul teks atau komentar.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling mengembalikan elemen yang langsung berada setelah elemen saat ini dalam induk yang sama.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling bergerak ke arah sebaliknya. Keduanya mengembalikan null jika tidak ada elemen sebaya.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Properti Elemen vs Simpul
Berhati-hatilah: childNodes, nextSibling, dan parentNode mencakup simpul teks (termasuk spasi). Versi *Element* biasanya adalah yang Anda perlukan.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest menelusuri pohon ke arah atas dari elemen saat ini dan mengembalikan leluhur terdekat (atau elemen itu sendiri) yang cocok dengan sebuah pemilih.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest untuk Delegasi Peristiwa
closest sangat cocok saat klik mengenai elemen bagian dalam, tetapi Anda memerlukan container luar yang menanganinya.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches menguji apakah sebuah elemen memenuhi pemilih, lalu mengembalikan nilai benar atau salah. Sangat berguna bersama penelusuran.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Menggabungkan Penelusuran
Anda dapat merangkai langkah-langkah penelusuran untuk menjelajahi struktur yang rumit, misalnya dari sebuah tombol naik ke barisnya lalu berpindah ke baris berikutnya.
const next = btn.closest("tr").nextElementSibling;Pemeriksaan Singkat
Pilih properti yang benar.
Rangkuman
Anda dapat bergerak ke atas dengan parentElement dan closest, masuk ke elemen anak dengan children, firstElementChild, dan lastElementChild, serta bergerak ke samping dengan nextElementSibling dan previousElementSibling. Utamakan properti yang hanya mencakup elemen agar simpul teks spasi dapat dilewati.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menelusuri Induk, Anak, dan Saudara” gratis?
Ya — teks lengkap “Menelusuri Induk, Anak, dan Saudara” 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 “Menelusuri Induk, Anak, dan Saudara”?
Navigasikan pohon DOM di antara simpul yang saling terkait. 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 3 dari 4.
Berapa lama pelajaran “Menelusuri Induk, Anak, dan Saudara” 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