Bagaimana unsur -unsur DOM yang dibuat secara dinamik diakses dan dikendalikan oleh skrip yang dimuatkan

Artikel ini menerangkan bagaimana skrip JavaScript dapat diakses dengan berkesan dan dimanipulasi apabila ia dimuatkan dan dilaksanakan sebelum penciptaan elemen DOM dalam pembangunan web. Kami akan memperkenalkan tiga strategi teras: secara langsung lulus rujukan elemen melalui nilai pulangan fungsi, menggunakan peristiwa tersuai untuk mencapai komunikasi antara modul, dan menggunakan MutationObserver untuk mendengar perubahan struktur DOM. Kaedah ini dapat membantu pemaju menyelesaikan cabaran antara masa pelaksanaan JavaScript dan pemuatan kandungan dinamik, memastikan skrip dapat mengendalikan unsur-unsur dengan betul, seperti menjadikannya drag-mampu.

Memahami Masalah: Masa Pelaksanaan JavaScript dan DOM Dinamik

Dalam pembangunan front-end web, senario yang biasa ialah skrip JavaScript yang dilaksanakan apabila pemuatan halaman memerlukan operasi pada unsur-unsur yang ditambahkan secara dinamik ke DOM kemudian melalui interaksi pengguna atau pemuatan data tak segerak. Dilema tipikal ialah apabila skrip cuba mendapatkan unsur -unsur melalui kaedah seperti document.getElementById (), document.getElementsByClassName (), pertanyaan ini akan mengembalikan koleksi kosong atau kosong jika elemen sasaran belum wujud di DOM.

Sebagai contoh, pertimbangkan struktur HTML dan fail JavaScript berikut:

 
    
      <butang onclick="add_product ()">
        Tambah
     </butang>
     <script type="text/javascript" src="static/script1.js"> </script>
     <script type="text/javascript" src="static/script2.js"> </script>
    

Antaranya, script1.js bertanggungjawab untuk mewujudkan unsur -unsur secara dinamik:

 // statik/script1.js
fungsi add_product () {
    const add_product_div = document.createeLement ("div");
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerHtml = "<h1> hey </h1> <p> walau apa pun </p>";
    document.body.appendchild (add_product_div);
}

Dan script2.js cuba mengakses unsur -unsur ini:

 // statik/script2.js
const divs = document.getElementsByClassName ("DragGable_Box");
console.log (divs); // Pada mulanya, htmlcollection kosong akan dikeluarkan

Oleh kerana script2.js dilaksanakan apabila halaman dimuatkan, dan fungsi add_product () dipanggil hanya selepas butang diklik, tidak ada elemen dalam dom dengan nama kelas draggable_box apabila script2.js dilaksanakan. Untuk menyelesaikan masalah ini, kita memerlukan mekanisme untuk membolehkan Script2.js atau logik lain yang berkaitan untuk mengakses dan mengendalikan unsur -unsur tepat pada masanya selepas dicipta.

Berikut adalah beberapa penyelesaian yang berkesan.

Penyelesaian 1: Nilai pulangan fungsi diluluskan secara langsung

Kaedah yang paling langsung dan sering digunakan adalah untuk mempunyai fungsi yang mewujudkan elemen mengembalikan rujukan elemen yang baru dibuat. Dengan cara ini, kod yang memanggil fungsi itu boleh mendapatkan elemen baru dan melaksanakan operasi seterusnya di atasnya dengan segera.

Kaedah Pelaksanaan:

Ubah suai fungsi add_product untuk mengembalikan elemen Div yang dicipta.

 // statik/script1.js (diubahsuai)
fungsi add_product () {
    const add_product_div = document.createeLement ("div");
    add_product_div.id = "add_product";
    add_product_div.classname = "draggable_box";
    add_product_div.innerHtml = "<h1> hey </h1> <p> walau apa pun </p>";
    document.body.appendchild (add_product_div);
    kembali add_product_div; // Kembalikan elemen Div yang baru diwujudkan}

Kemudian, di mana add_product dipanggil (seperti dalam pendengar acara butang), dapatkan nilai pulangan ini dan beroperasi. Untuk amalan yang lebih baik, kami biasanya menggunakan addeventlistener dan bukannya inline onclick.

 
    
      <button id="AddProductButton">
        Tambah
     
     <script type="text/javascript" src="static/script1.js"> </script>
     <script type="text/javascript" src="static/script2.js"> </script>
    
</button>

 // statik/script2.js (atau di lokasi lain yang sesuai)
// Anggaplah ini adalah fungsi logik untuk mengendalikan penambahan produk dan menjadikannya draggable onproductbuttonclick () {
  const newDiv = add_product (); // panggil fungsi dan dapatkan div yang baru dibuat
  Console.log ("Newdiv:", Newdiv);
  // Di sini anda boleh mengendalikan NewDiv, sebagai contoh, menjadikannya drag-boleh // makedraggable (newDiv); // Katakan ada fungsi yang dapat membuat unsur-unsur boleh diseret}

// pastikan untuk menambah document.addeventListener pendengar ('domContentLoaded', () => {
  butang const = document.getElementById ('addProductButton');
  jika (butang) {
    Button.AdDeventListener ('klik', onProductButtonClick);
  }
});

// Fungsi makedraggable hipotetikal digunakan untuk menunjukkan fungsi makedraggable (elemen) {
  // Logik seret sebenar hanya digunakan di sini untuk menggambarkan elemen.style.cursor = 'Grab';
  console.log (`elemen $ {element.id || element.classname} telah ditetapkan ke draggable`);
}

Kelebihan dan senario yang sesuai:

• Mudah dan intuitif: Kod ini jelas dan rujukan elemen diluluskan secara langsung.
• Kawalan Langsung: Pemanggil mempunyai rujukan langsung kepada elemen yang baru dibuat dan boleh beroperasi dengan segera.
• Perpaduan Tinggi: Penciptaan dan Operasi Awal (seperti Penetapan Seret) boleh digabungkan dengan teliti.
• Senario yang berkenaan: Kaedah ini paling sesuai apabila membuat unsur -unsur dan logik yang beroperasi pada mereka berada dalam modul berfungsi yang sama atau fungsi yang berkaitan dengan rapat.

Penyelesaian 2: Gunakan acara tersuai untuk berkomunikasi

Menggunakan peristiwa tersuai adalah penyelesaian yang elegan apabila logik mewujudkan unsur -unsur dan elemen operasi terletak di modul yang berbeza dan dipadamkan. Modul yang mewujudkan elemen boleh mengedarkan acara untuk memberitahu modul lain bahawa unsur -unsur baru telah ditambah, sementara modul lain dapat mendengar acara dan bertindak balas.

Kaedah Pelaksanaan:

Dalam fungsi add_product, buat dan mengedarkan acara tersuai, yang boleh membawa rujukan kepada elemen yang baru dibuat.

 // statik/script1.js (diubahsuai)
fungsi add_product () {
  const add_product_div = document.createeLement ("div");
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerHtml = "<h1> hey </h1> <p> walau apa pun </p>";
  document.body.appendchild (add_product_div);

  /
    Perincian: {
      elemen: add_product_div // lulus elemen yang baru dibuat sebagai data acara}
  });
  document.body.dispatchEvent (event); // acara penghantaran pada badan}

Kemudian, dengarlah acara tersuai ini di Script2.js atau skrip lain yang perlu dijawab.

 // statik/script2.js (diubahsuai)
// Dengar dokumen acara 'ProductAdded'.body.addeventListener (' ProductAdded ', (e) => {
  const newDiv = e.detail.element; // Dapatkan unsur baru Console.log dari Console.log atribut terperinci acara ("Menerima Div yang baru dibuat melalui acara:", Newdiv);
  // beroperasi newdiv di sini, sebagai contoh, menjadikannya drag-boleh // makedraggable (newDiv);
});

// pastikan untuk menambah document.addeventListener pendengar ('domContentLoaded', () => {
  butang const = document.getElementById ('addProductButton');
  jika (butang) {
    button.addeventListener ('klik', add_product); // Klik butang untuk menghubungi add_product secara langsung
  }
});

// Fungsi makedraggable hipotetikal digunakan untuk menunjukkan fungsi makedraggable (elemen) {
  element.style.cursor = 'Grab';
  console.log (`elemen $ {element.id || element.classname} telah ditetapkan untuk menyeret (melalui acara)`);
}

Kelebihan dan senario yang sesuai:

• Decoupling: Logik mewujudkan unsur -unsur dan unsur -unsur operasi sepenuhnya dipisahkan dan kemerdekaan, meningkatkan modulariti dan mengekalkan kod.
• Mod Terbitkan/Melanggan: Mod Penerbitan/Langganan dilaksanakan, dan acara boleh dijawab oleh beberapa pendengar, meningkatkan fleksibiliti sistem.
• Pemberitahuan Global: Peristiwa boleh dihantar dan mendengar mana -mana nod di Dom Tree untuk mencapai pelbagai pemberitahuan yang lebih luas.
• Senario yang berkenaan: Apabila sistem terdiri daripada pelbagai komponen bebas, perlu berkomunikasi melalui peristiwa, atau operasi perlu memberitahu pelbagai modul yang tidak berkaitan, acara tersuai adalah pilihan yang sangat sesuai.

Penyelesaian Tiga: Gunakan MutationObserver untuk mendengar perubahan DOM

MutationObserver adalah API yang kuat yang membolehkan kita mendengar perubahan dalam pokok DOM, termasuk penambahan, penyingkiran, pengubahsuaian harta atau perubahan kandungan teks nod. Ini sangat berguna untuk senario di mana tindak balas umum terhadap perubahan dinamik dalam DOM diperlukan.

Kaedah Pelaksanaan:

Buat contoh MutationObserver dan konfigurasikannya untuk mendengar perubahan nod kanak -kanak dalam dokumen.body.

 // statik/script2.js (diubahsuai)
fungsi initMutationObserver () {
  const Observer = New MutationObserver ((mutationList) => {
    untuk (mutasi mutasi mutasi) {
      // semak jika nod baru ditambah jika (mutation.type === 'childlist' && mutation.addednodes.length> 0) {
        untuk (const node mutation.addedNodes) {
          // periksa sama ada nod yang baru ditambah adalah div yang kami berminat
          jika (node.nodetype === node.element_node && node.classlist.contains ('draggable_box')) {
            Console.log ("Cari Div yang baru dicipta melalui MutationObserver:", Node);
            // mengendalikan Div yang baru ditemui, sebagai contoh, menjadikannya drag-and-rropable // makedraggable (node);
          }
        }
      }
    }
  });

  // Konfigurasikan pemerhati: Dengar perubahan dalam nod kanak -kanak dari elemen badan pemerhati.observe (document.body, {
    Senarai kanak -kanak: benar // Perhatikan penambahan atau penyingkiran nod kanak -kanak // subtree: benar // jika anda perlu melihat perubahan dom yang lebih mendalam, anda boleh menambah item ini});
}

// pastikan untuk memulakan Window Observer.AdDeventListener ('LOAD', INITMUTATIONOBSERVER); // atau domcontentloaded

// statik/script1.js (tetap sama, atau gunakan versi asal)
fungsi add_product () {
  const add_product_div = document.createeLement ("div");
  add_product_div.id = "add_product";
  add_product_div.classname = "draggable_box";
  add_product_div.innerHtml = "<h1> hey </h1> <p> walau apa pun </p>";
  document.body.appendchild (add_product_div);
}

// pastikan untuk menambah document.addeventListener pendengar ('domContentLoaded', () => {
  butang const = document.getElementById ('addProductButton');
  jika (butang) {
    button.addeventListener ('klik', add_product);
  }
});

// Fungsi makedraggable hipotetikal digunakan untuk menunjukkan fungsi makedraggable (elemen) {
  element.style.cursor = 'Grab';
  console.log (`elemen $ {element.id || element.classname} telah ditetapkan untuk menyeret (melalui MutationObserver)`);
}

Kelebihan dan senario yang sesuai:

• Universality: Anda boleh mendengar sebarang perubahan DOM, bukan hanya peristiwa khusus.
• Bukan invasif: Logik membuat unsur-unsur tidak diubahsuai, dan MutationObserver berfungsi secara bebas dari proses penciptaan.
• Kawalan halus: Anda boleh mengkonfigurasi dengan tepat jenis perubahan yang harus diperhatikan dan yang mana subtree Dom untuk diperhatikan.
• Senario yang berkenaan: MutationObserver adalah pilihan terbaik apabila perlu bertindak balas terhadap perubahan yang meluas, tidak dapat diramalkan atau dinamik dari perpustakaan pihak ketiga, atau apabila alat pemantauan DOM diperlukan untuk mencapai kesejagatan. Sebagai contoh, apabila melaksanakan rangka kerja seret, MutationObserver sangat berguna jika anda mahu semua elemen ditambah secara dinamik untuk mendapatkan keupayaan drag-and-drop secara automatik tanpa mengira bagaimana ia dicipta.

Ringkasan dan Cadangan Pemilihan

Kunci untuk mengendalikan interaksi antara skrip JavaScript dan elemen DOM dinamik adalah untuk memecahkan batasan masa pelaksanaan skrip dan memastikan bahawa elemen dapat diperolehi apabila ia tersedia.

• Pemindahan langsung fungsi pulangan fungsi: Yang paling mudah dan paling langsung, sesuai untuk senario di mana logik penciptaan dan operasi digabungkan dengan ketat. Jika fungsi add_product anda adalah untuk membuat elemen tertentu yang perlu dikendalikan dengan serta -merta, ini adalah pilihan pertama.
• Peristiwa Custom: Menyediakan mekanisme komunikasi yang dipisahkan, sesuai untuk senario di mana modul yang berbeza perlu bekerjasama dalam aplikasi besar. Pilih kaedah ini apabila operasi untuk membuat elemen memerlukan memberitahu beberapa pendengar yang tidak berkaitan, atau apabila anda ingin memisahkan logik penciptaan dari logik operasi.
• MutationObserver: Penyelesaian yang paling kuat dan sejagat untuk senario di mana perubahan dinamik di seluruh pokok Dom atau bahagian tertentu perlu dipantau dan bertindak balas terhadap perubahan ini dengan cara yang sama. Ia berguna apabila anda tidak mempunyai kawalan ke atas bagaimana unsur -unsur dicipta, atau jika anda perlu memproses secara seragam semua elemen dinamik yang memenuhi kriteria tertentu.

Dalam perkembangan sebenar, memilih strategi yang paling sesuai dapat meningkatkan pemeliharaan dan keteguhan kod berdasarkan keperluan khusus dan kerumitan projek.

Atas ialah kandungan terperinci Bagaimana unsur -unsur DOM yang dibuat secara dinamik diakses dan dikendalikan oleh skrip yang dimuatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!