Menukar Kandungan DOM Dinamik ke Arrays dalam JavaScript: Amalan Terbaik Untuk Menghindari Isu Null

Tutorial ini bertujuan untuk menyelesaikan masalah biasa dalam pembangunan JavaScript: Apabila cuba menukar kandungan elemen DOM yang dikemas kini secara dinamik ke dalam array, pembolehubah sentiasa kosong. Inti adalah untuk memahami masa pelaksanaan kod JavaScript. Artikel ini akan menerangkan secara terperinci mengapa mendapatkan kandungan DOM apabila skrip dimuatkan akan menghasilkan nilai null, dan memberikan cara yang betul untuk mendapatkan dan menukar kandungan dalam masa nyata selepas interaksi pengguna (seperti dalam peristiwa klik butang), memastikan ketepatan data.

Dalam pembangunan web, kita sering perlu menangkap dan memproses kandungan yang dihasilkan secara dinamik pada input pengguna atau halaman. Senario yang biasa ialah pengguna menambahkan teks ke elemen DOM (seperti kawasan paparan) dengan mengklik butang, dan kemudian kami ingin menukar kandungan teks kawasan paparan ini ke dalam array untuk pemprosesan logik selanjutnya. Walau bagaimanapun, ramai pemaju menghadapi kekeliruan apabila mencuba untuk kali pertama: walaupun kandungannya telah dipaparkan pada halaman, apabila mereka cuba menukar textcontent elemen DOM ke dalam array, array yang dihasilkan sentiasa kosong (panjang: 0).

Memahami punca utama masalah: Masa pelaksanaan kod JavaScript

Inti masalah terletak pada masa pelaksanaan kod JavaScript. Pertimbangkan coretan kod berikut:

 const typedNum = document.QuerySelector ("#num-area");
// ... pemilihan elemen dom lain ...
const arr_equation = typedNum.textContent.split (""); // Barisan ini adalah akar masalah // ... pendengar acara lain ...

Apabila penyemak imbas memuat dan parses HTML, CSS, dan JavaScript, kod JavaScript dilaksanakan dari atas ke bawah. Dalam kod di atas, const arr_equation = typedNum.textContent.split (""); Garis ini akan dilaksanakan dengan segera apabila skrip dimuatkan. Pada ketika ini, unsur #Num-kawasan biasanya kosong kerana ia belum menerima sebarang input pengguna. Oleh itu, typednum.textContent adalah rentetan kosong pada masa ini, dan selepas membelahnya ("") anda secara semulajadi akan mendapat array kosong. Selepas itu, walaupun pengguna mengklik butang untuk menambah kandungan ke TypedNum, nilai pembolehubah ARR_EQUATION tidak dikemas kini secara automatik kerana ia adalah pemalar yang diisytiharkan melalui const dan nilainya ditentukan pada permulaan.

Penyelesaian yang betul: dapatkan kandungan dinamik atas permintaan

Untuk menyelesaikan masalah ini, kunci adalah untuk melambatkan operasi mendapatkan textContent dan menukarnya ke dalam array sehingga kandungan dinamik ini benar -benar diperlukan. Biasanya, ini bermakna meletakkan bahagian logik ini di dalam pendengar acara yang mencetuskan pemprosesan data. Sebagai contoh, apabila pengguna mengklik butang "sama dengan", dia akan mendapat textContent terkini elemen typednum.

Berikut adalah contoh kod JavaScript yang diubahsuai:

 const typedNum = document.QuerySelector ("#num-area");
result const = document.QuerySelector ("#hasil");
const one = document.QuerySelector ("#one");
const two = document.QuerySelector ("#dua");
const plus = document.QuerySelector ("#plus");
const sama = document.QuerySelector ("#sama");

// nota: arr_equation tidak lagi diisytiharkan di bahagian atas, kerana ia memerlukan secara dinamik mendapatkan one.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "1";
});
two.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "2";
});
plus.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "";
});

sama.addeventListener ("klik", fungsi () {
    // Apabila mengklik butang "sama dengan", dapatkan kandungan terkini typedNum dalam masa nyata const arr_equation = typedNum.textContent.split ("");
    result.textContent = arr_equation; // Menetapkan array terus ke TextContent akan secara automatik ditukar kepada rentetan});

Dengan memindahkan const arr_equation = typedNum.TextContent.Split (""); Ke dalam pendengar acara klik butang yang sama, kami memastikan bahawa setiap kali butang "sama" diklik, textContent terkini semasa elemen typednum yang mengandungi input pengguna diambil dan ditukar menjadi array.

Pengoptimuman dan langkah berjaga -jaga selanjutnya

Dalam aplikasi praktikal, kita mungkin perlu memproses lagi kandungan yang diperolehi. Sebagai contoh, jika typednum.textContent mengandungi ruang tambahan (seperti "1 2") dan kami tidak mahu ruang ini muncul dalam elemen array akhir, kami boleh menggunakan kaedah penapis untuk membersihkannya:

 sama.addeventListener ("klik", fungsi () {
    const arr_equation = typedNum.TextContent
                                  .split ("")
                                  .filter (item => item! == ""); // penapis ruang hasil.textContent = arr_equation.join (','); // elemen array concatenate dengan koma untuk dipaparkan, yang lebih jelas});

Di sini penapis (item => item! == "") akan mengeluarkan semua aksara ruang dari array. Pada masa yang sama, tukar hasil.TextContent = arr_equation; untuk result.TextContent = arr_equation.join (','); Untuk memaparkan pelbagai elemen array dengan lebih jelas di kawasan hasil, mengelakkan kesulitan yang boleh menyebabkan ToString () lalai boleh menyebabkan.

Kod sampel lengkap

Untuk menyediakan konteks yang lengkap, berikut adalah contoh lengkap HTML, CSS, dan JavaScript yang menunjukkan cara membina antara muka kalkulator yang mudah dan mengendalikan kandungan dinamik dengan betul:

Html (index.html):

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> tutorial untuk kandungan dom dinamik untuk array 
    <link rel="stylesheet" href="style.css">


    <pre id="num-area"> 

1 2 =

CSS (style.css):

 #num-area {
    lebar: 440px;
    Ketinggian: 100px;
    Kedudukan: Mutlak;
    Atas: 0;
    Font-Family: Arial;
    saiz font: 35px;
    latar belakang warna: #ddd;
    Warna: #000;
    Padding: 20px;
    saiz kotak: kotak sempadan; /* Pastikan padding tidak meningkatkan jumlah lebar*/
    White-Space: Pre-Wrap; /* Benarkan baris teks bungkus*/
}
#result {
    lebar: 440px;
    Ketinggian: 50px;
    Kedudukan: Mutlak;
    Atas: 150px;
    Font-Family: Arial;
    saiz font: 20px;
    latar belakang warna: #fdd;
    Warna: #000;
    Padding: 10px 20px;
    saiz kotak: kotak sempadan;
    Paparan: Flex;
    Align-items: Center;
}
rentang {
    Bawah: 0;
    Kedudukan: Mutlak;
    lebar: 90px;
    Ketinggian: 55px;
    latar belakang warna: biru;
    Radius sempadan: 15px;
    Warna: #ffff;
    saiz font: 20px;
    Font-Family: Arial;
    Paparan: Flex;
    Justify-Content: Center;
    Align-items: Center;
    kursor: penunjuk;
}
#One {
  margin-kiri: 100px;
}
#two { /* tambah gaya #two untuk menyelaraskannya dengan #satu* /
  margin-kiri: 0px; /* Anggapkan di sebelah kiri #One, atau laraskan mengikut susun atur*/
  Bawah: 0; /* Selaras dengan butang lain*/
}
#plus {
  Margin-Left: 200px;
}
#equal {
  margin-kiri: 300px;
}

JavaScript (script.js):

 const typedNum = document.QuerySelector ("#num-area");
result const = document.QuerySelector ("#hasil");
const one = document.QuerySelector ("#one");
const two = document.QuerySelector ("#dua");
const plus = document.QuerySelector ("#plus");
const sama = document.QuerySelector ("#sama");

one.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "1";
});
two.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "2";
});
plus.addeventListener ("klik", fungsi () {
    typedNum.TextContent = "";
});

sama.addeventListener ("klik", fungsi () {
    const arr_equation = typedNum.TextContent
                                  .split ("")
                                  .filter (item => item! == ""); // menapis ruang hasil.textContent = "kandungan array: [" arr_equation.join (',') "]";
});

Meringkaskan

Apabila berurusan dengan kandungan DOM yang dinamik, prinsip teras adalah "mendapatkannya atas permintaan" . Daripada mendapatkan kandungan DOM yang berubah dengan interaksi pengguna sekaligus apabila skrip dimuatkan, requery dan dapatkannya setiap kali keadaan terkini kandungan ini diperlukan (contohnya, di dalam pendengar acara). Memahami masa pelaksanaan JavaScript dan kitaran hidup pembolehubah adalah kunci untuk mengelakkan masalah biasa. Dengan mengikuti amalan terbaik ini, anda boleh memastikan bahawa aplikasi web anda dapat mengendalikan input pengguna dan kandungan halaman dinamik dengan tepat dan boleh dipercayai.

Atas ialah kandungan terperinci Menukar Kandungan DOM Dinamik ke Arrays dalam JavaScript: Amalan Terbaik Untuk Menghindari Isu Null. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!