jQuery Academy · Pelajaran

Teknik Traversal DOM yang Efisien

Kuasai metode seperti .closest(), .siblings(), .find(), dan .parentsUntil() untuk menelusuri pohon DOM secara efisien dan menghindari hambatan kinerja.

Teknik Traversal DOM yang Efisien adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Menelusuri Pohon DOM

Selamat datang! Dalam pelajaran ini, kita akan menguasai teknik efisien untuk berpindah di dalam Document Object Model (DOM).

DOM ibarat pohon keluarga bagi elemen-elemen halaman web Anda. Dengan memahami cara menelusurinya, Anda dapat memilih elemen secara tepat, bahkan tanpa ID atau class langsung.

Menelusuri: Bergerak atau berpindah melintasi atau melalui sesuatu.
DOM: Representasi internal browser atas struktur HTML Anda.

Menemukan Keturunan dengan .find()

Metode .find() sangat tepat untuk menemukan elemen keturunan. Metode ini mencari *di dalam* elemen yang sedang dipilih untuk menemukan kecocokan apa pun.

Bayangkan seperti mencari barang tertentu di dalam kotak tertentu. Metode ini sangat berguna untuk mempersempit pencarian.

Sintaks: $(selector).find(filterSelector)
Mengembalikan: Objek jQuery baru yang berisi elemen-elemen keturunan yang ditemukan.

.find() dalam Aksi

Mari temukan semua item daftar (<li>) di dalam daftar tak berurutan tertentu (<ul>).

Cobalah menjalankan kode ini dan lihat item mana yang mendapatkan latar belakang hijau!

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

Menelusuri ke Atas dengan .closest()

Terkadang Anda perlu menemukan leluhur (induk, kakek, dan seterusnya) dari sebuah elemen. Metode .closest() melakukan hal tersebut.

Metode ini dimulai dari elemen saat ini dan bergerak *ke atas* pohon DOM, lalu mengembalikan leluhur *pertama* yang cocok dengan selector yang diberikan.

Sintaks: $(selector).closest(filterSelector)
Mengembalikan: Objek jQuery yang berisi satu leluhur terdekat.

.closest() dalam Aksi

Bayangkan Anda mengeklik tombol yang berada jauh di dalam struktur bertingkat. Anda ingin menemukan container utamanya. .closest() sangat tepat untuk keperluan ini.

Klik tombol di bawah untuk menyoroti leluhur <div> terdekatnya.

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

Menjelajahi Elemen Saudara dengan .siblings()

Elemen yang berada pada tingkat yang sama dalam pohon DOM disebut 'elemen saudara'. Metode .siblings() membantu Anda memilih semuanya.

Metode ini menemukan semua elemen yang memiliki induk yang sama dengan elemen saat ini, *tidak termasuk* elemen saat ini.

Sintaks: $(selector).siblings(filterSelector)
Mengembalikan: Objek jQuery baru yang berisi semua elemen saudara.

.siblings() dalam Aksi

Mari soroti semua elemen saudara dari item daftar tertentu saat Anda mengekliknya. Ini berguna untuk daftar atau menu interaktif.

Klik item daftar mana pun untuk melihat warna elemen saudaranya berubah!

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

Menelusuri ke Atas dengan .parentsUntil()

Bagaimana jika Anda ingin memilih *beberapa* leluhur, tetapi berhenti di titik tertentu? Di sinilah .parentsUntil() berguna.

Metode ini bergerak ke atas pohon DOM, memilih semua leluhur elemen saat ini *sampai* mencapai elemen yang ditentukan oleh selector. Elemen 'stop' itu sendiri tidak disertakan.

Sintaks: $(selector).parentsUntil(stopSelector, filterSelector)
Mengembalikan: Objek jQuery yang berisi leluhur yang dipilih.

.parentsUntil() dalam Aksi

Kita memiliki struktur yang bertingkat sangat dalam. Mari pilih semua elemen induk dari sebuah <span> sampai mencapai <div class="container"> tertentu.

Jalankan contoh ini untuk melihat elemen mana yang mendapatkan border, tetapi perhatikan bahwa div 'container' itu sendiri dilewati!

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

Pemeriksaan Singkat

Anda memiliki elemen <img> yang berada di dalam <div class="gallery-item">, yang berada di dalam <div class="gallery-row">. Jika Anda memilih <img>, metode jQuery apa yang akan Anda gunakan untuk mendapatkan *hanya* <div class="gallery-item">?

Ringkasan: Penelusuran DOM yang Efisien

Bagus sekali! Anda telah menguasai metode-metode utama jQuery untuk penelusuran DOM yang efisien:

.find(): Mencari *di dalam* elemen untuk menemukan keturunannya.
.closest(): Menemukan *leluhur terdekat* yang cocok dengan selector dengan bergerak *ke atas* pohon.
.siblings(): Memilih semua elemen pada *tingkat yang sama* dengan elemen saat ini (tidak termasuk elemen itu sendiri).
.parentsUntil(): Memilih beberapa leluhur *hingga* (tetapi tidak termasuk) elemen penghenti yang ditentukan.

Penggunaan metode-metode ini secara tepat membantu Anda menulis kode jQuery yang lebih presisi, berkinerja lebih baik, dan mudah dibaca untuk aplikasi web dinamis!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Teknik Traversal DOM yang Efisien” gratis?

Ya — teks lengkap “Teknik Traversal DOM yang Efisien” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Teknik Traversal DOM yang Efisien”?

Kuasai metode seperti .closest(), .siblings(), .find(), dan .parentsUntil() untuk menelusuri pohon DOM secara efisien dan menghindari hambatan kinerja. Kamu berlatih jQuery 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 jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery 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 3.

Berapa lama pelajaran “Teknik Traversal DOM yang Efisien” 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 jQuery Academy ini?

Ya. Setiap pelajaran jQuery 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

← Kembali ke jQuery Academy