Kes penggunaan praktikal untuk kaedah terdekat JavaScript ()

Bosan dengan cabaran Node Traversal JavaScript? Mencari elemen nenek moyang yang betul boleh menjadi rumit, terutamanya dengan struktur HTML yang sangat bersarang atau dinamik. Mari kita meneroka bagaimana kaedah closest() memudahkan proses ini.

Pertimbangkan coretan HTML ini:

<div data-id="123">
  Klik saya
</div>

Mendapatkan data-id selepas klik butang mudah menggunakan parentNode :

 butang const = document.QuerySelector ("butang");
butang.addeventListener ("klik", (evt) => {
  console.log (evt.target.parentnode.dataset.id); // Cetakan "123"
});

Walau bagaimanapun, pendekatan ini gagal dengan bersarang yang lebih kompleks:

<div data-id="123">
  <div>
    <h1 id="Beberapa-tajuk">Beberapa tajuk</h1>
    <button>Klik saya</button>
  </div>
</div>

Chaining parentNode beberapa kali adalah rumit dan tidak dapat dipastikan. Penyelesaian yang lebih lama terlibat while gelung:

 fungsi getParentNode (el, tagName) {
  sementara (el && el.parentnode) {
    EL = el.ParentNode;
    jika (el && el.tagname === tagName.toUpperCase ()) {
      kembali El;
    }
  }
  kembali null;
}

Semasa berfungsi, ini tidak fleksibel dan tidak mengendalikan pemilih di luar nama tag. JQuery's .closest() menawarkan penyelesaian yang unggul, tetapi menambah perpustakaan untuk satu fungsi sering berlebihan.

Masukkan Element.closest()

Kaedah Element.closest() asli menyediakan penyelesaian yang elegan:

 butang const = document.QuerySelector ("butang");
Console.log (Button.Closest ("Div")); // Mengembalikan<div> elemen<p> <code>closest()</code> melintasi DOM ke atas sehingga ia mendapati nenek moyang yang sepadan dengan pemilih yang disediakan. Pemilih ini boleh menjadi pemilih CSS yang sah: id, kelas, atribut, atau nama tag.</p>
<pre class="brush:php;toolbar:false"> element.closest ("#my-id"); // berfungsi
elemen.closest (". my-class"); // berfungsi
elemen.closest ("[data-id]"); // berfungsi

Sekiranya tiada nenek moyang yang sepadan, closest() mengembalikan null . Ini menjadikan pemeriksaan bersyarat mudah:

 butang const = document.QuerySelector ("butang");
jika (Button.Closest (". My-Class")) {
  console.log ("found!");
} else {
  Console.log ("Tidak dijumpai!");
}

Aplikasi dunia nyata

1. Dropdowns: Mengesan klik di luar menu dropdown untuk menutupnya:

 // ... (kod pengendalian acara) ...
jika (! evt.target.closest (". Menu-Dropdown")) {
  // Tutup jatuh turun
}

2. Jadual: Ambil atribut data dari baris jadual apabila berinteraksi dengan butang dalam baris tersebut:

 fungsi getUserId (sasaran) {
  kembali sasaran.closest ("[data-userid]"). dataset.userid;
}

3. Jadual React: Sama seperti di atas, tetapi dalam komponen React:

 fungsi handleclick (evt) {
  const userId = evt.currentTarget.closest ("[data-userid]"). dataset.userid;
  // ...
}

4. Modal: Tutup modal semasa mengklik di luar kandungan modal:

 // ... (kod pengendalian acara) ...
jika (! evt.target.closest (". Modal-inner")) {
  // tutup modal
}

Sokongan penyemak imbas

Element.closest() menikmati sokongan penyemak imbas yang sangat baik, tidak termasuk versi lama Internet Explorer. Ini menjadikannya pilihan yang selamat dan boleh dipercayai untuk kebanyakan projek.

Element.closest() menawarkan cara yang ringkas dan cekap untuk menavigasi hierarki DOM, menghapuskan keperluan untuk gelung kompleks atau perpustakaan luaran dalam banyak senario biasa. Sokongan fleksibiliti dan penyemak imbasnya menjadikannya alat yang berharga bagi mana -mana pemaju JavaScript.